Built-in keyboard navigation, ARIA attributes, and motion preferences.
Tempis Timeline includes accessibility support out of the box. The canvas element is made focusable and keyboard-navigable by default, with ARIA attributes for screen reader identification and automatic respect for the user's reduced motion preference.
Accessibility options are grouped under the accessibility key in the timeline options.
import { TempisTimeline } from '@tempis/timeline';
const timeline = new TempisTimeline('#canvas', {
accessibility: {
ariaLabel: 'Project Schedule — Q1 2026',
keyboard: true,
keyboardPanStep: 0.1,
keyboardZoomStep: 0.5
},
items: [
{ id: 1, label: 'Item 1', start: '2026-03-01', end: '2026-03-10' },
{ id: 2, label: 'Item 2', start: '2026-03-08', end: '2026-03-18' },
],
range: { start: '2026-02-25', end: '2026-04-01', position: 'bottom' }
});| Option | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | — | Sets the aria-label attribute on the canvas. Provides a meaningful description for screen readers. |
keyboard | boolean | true | Enables keyboard navigation. When false, no tabindex or key handlers are added. |
keyboardPanStep | number | 0.1 | Fraction of the visible range to pan per arrow key press. 0.1 pans 10% of the visible range. |
keyboardZoomStep | number | 0.5 | Zoom intensity per +/- key press. Higher values zoom faster. |
When the canvas is focused (via Tab or click), the following keys are available:
| Key | Action |
|---|---|
← Arrow Left | Pan the timeline backward in time |
→ Arrow Right | Pan the timeline forward in time |
↑ Arrow Up | Scroll the data view up (when content overflows) |
↓ Arrow Down | Scroll the data view down (when content overflows) |
+ or = | Zoom in (centered on the viewport) |
- or _ | Zoom out (centered on the viewport) |
Pan direction is automatically reversed when the timeline is in RTL mode.
The timeline automatically applies the following attributes to the canvas element unless they are already set in your markup:
| Attribute | Value | Purpose |
|---|---|---|
role | "img" | Identifies the canvas as a graphical element for screen readers. |
tabindex | "0" | Makes the canvas focusable via Tab. Only set when keyboard is enabled. |
aria-label | User-provided | Gives the canvas a descriptive name. Only set when ariaLabel is provided in options. |
role, tabindex, or aria-label directly on the canvas element in your HTML, the timeline will not overwrite them.The timeline respects the prefers-reduced-motion: reduce media query. When the user has requested reduced motion in their operating system or browser settings, all animated transitions (such as focus({ animate: true })) are applied instantly without animation.
This behaviour is always active and cannot be disabled.
If your application handles its own keyboard shortcuts and the timeline's key handlers conflict, you can disable them:
const timeline = new TempisTimeline('#canvas', {
accessibility: {
keyboard: false
},
items: [
{ id: 1, label: 'Item 1', start: '2026-03-01', end: '2026-03-10' },
],
range: { start: '2026-02-25', end: '2026-04-01', position: 'bottom' }
});When keyboard is false, no tabindex attribute or key event handlers are added to the canvas. The role and aria-label attributes are still applied.