Accessibility conformance report
This is the library's accessibility conformance report (ACR) against WCAG 2.2, levels A and AA: every success criterion of those levels, what the timeline does about it, and the test that shows it. A criterion marked "Supports" names at least one test, and the conformance check (node scripts/sdk_check_acr.mjs, run before each release) runs every one of them and fails if any is not green — its part that needs no browser, that every criterion is listed and every cited test exists, runs in CI on every change; the table on this page and that check read the same file, site/conformance/wcag22.json, so the two cannot drift apart. The same report, in the layout procurement asks for — the ITI VPAT® 2.5, International Edition, with the Revised Section 508 and EN 301 549 — is the VPAT, generated from the same file.
Scope
What is assessed is the timeline as the library draws it — @temporeum/timeline-element and the core under it, with its views and tools, in the default configuration and with editing on — on the documentation's own pages, in Chromium. A timeline lives inside someone else's page, so the criteria about the page itself (its title, its language, its headings and links, help and navigation across a site) are the host's, and are marked "Not applicable" here with that reason. So are the ones about media, authentication and multi-step forms, which the library has none of.
The statuses are the ones accessibility conformance reports use: Supports, Partially supports (some of it, and the remark says which part does not), Does not support, and Not applicable. Where a remark begins "Not verified by a test", the status is what the code is meant to do, not what a test has shown, and it is never "Supports".
The report
Supports: 30 · Partially supports: 4 · Not applicable: 22
| Criterion | Level | Status | Remarks | Shown by |
|---|---|---|---|---|
| 1.1.1 Non-text Content | A | Supports | Every drawn item is an option named by its label, its dates and its lane; the axis, the lane bands and the repeated text are hidden from assistive technology, because the options already say it. | core/test/a11y/semantics.test.ts — makes every drawn item an option with a unique id, a name with its datescore/test/a11y/semantics.test.ts — hides everything that repeats or decorates what the items say |
| 1.2.1 Audio-only and Video-only (Prerecorded) | A | Not applicable | The library plays no audio and no video. | — |
| 1.2.2 Captions (Prerecorded) | A | Not applicable | The library plays no audio and no video. | — |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | A | Not applicable | The library plays no audio and no video. | — |
| 1.2.4 Captions (Live) | AA | Not applicable | The library plays no audio and no video. | — |
| 1.2.5 Audio Description (Prerecorded) | AA | Not applicable | The library plays no audio and no video. | — |
| 1.3.1 Info and Relationships | A | Supports | The timeline is a listbox of options, each with its place among all items (aria-posinset, aria-setsize); nested groups are a tree; a Gantt task names its predecessors and successors. | core/test/a11y/semantics.test.ts — its place among all itemscore/test/gantt-a11y/gantt-a11y.test.ts — [claim:links-named] |
| 1.3.2 Meaningful Sequence | A | Supports | The keyboard and the accessible order walk the items by start, then by row, the same in every orientation and direction. | core/test/keyboard/navigation.test.ts — orders by start, then row, and is built once per layoutcore/test/rtl/rtl.test.ts — [claim:keys-mirrored] |
| 1.3.3 Sensory Characteristics | A | Not applicable | The library gives no instructions; the words around a timeline are the host's. | — |
| 1.3.4 Orientation | AA | Supports | Not locked to an orientation: below its breakpoint the timeline turns vertical, and follows a live resize without a reload. | core/test/responsive.test.ts — is horizontal at and above the breakpoint, vertical below itdocs/e2e/responsive.spec.ts — live resizing |
| 1.3.5 Identify Input Purpose | AA | Not applicable | The library collects no information about the user and draws no form field: the date prompt for g is the host's, opened from the jumpRequest event. | — |
| 1.4.1 Use of Color | A | Supports | Selection and focus are an outline ring, not a colour; an overbooked resource is banded and its items say so in their names. | core/test/a11y/semantics.test.ts — points at the keyboard's item, and rings itcore/test/resources/resources-edges.test.ts — names an overbooked assignment |
| 1.4.2 Audio Control | A | Not applicable | The library plays no audio. | — |
| 1.4.3 Contrast (Minimum) | AA | Supports | Every text token against every surface it is drawn on is at least 4.5:1, in the light and the dark theme, computed as WCAG defines contrast. | core/test/a11y/contrast.test.ts — computes contrast as WCAG defines itcore/test/a11y/contrast.test.ts — is at least |
| 1.4.4 Resize Text | AA | Supports | With the browser's zoom the timeline is laid out again for the narrower view and loses no item, name or key: tested at 200% (a 1280 × 800 window, 640 × 400 CSS pixels at two device pixels each) and at 400% (320 CSS pixels, see 1.4.10). Text-only enlargement does not reach it: its type sizes are pixels from the density, so a root font size of 200% and a 32-pixel default font in the browser leave its labels at 12 and its axis at 11 pixels while the page's own text grows to 64 (tested). A browser's text-only zoom, which enlarges pixel sizes too, is not tested. | docs/e2e/responsive.spec.ts — page zoom 200%docs/e2e/responsive.spec.ts — 320 px reflowdocs/e2e/a11y.spec.ts — text-only enlargement (1.4.4) |
| 1.4.5 Images of Text | AA | Supports | Item labels and tick labels are text — SVG text, or HTML in the item — in every theme and density; nothing is a picture of text. | core/test/acr/acr.test.ts — [claim:text-not-image] |
| 1.4.10 Reflow | AA | Supports | At 320 CSS pixels (a 1280-pixel window at 400%) the element turns vertical and dense, the page does not scroll sideways, every item keeps its whole name, and the keys bring each item wholly into view; at 256 pixels tall a horizontal timeline, given a height that fits, shows every lane, so nothing scrolls both ways. Two lanes take 336 pixels across in the dense layout, 16 more than 320: the lanes then scroll across inside the timeline (the keys do it for the focused item), as two-dimensional content may; the page itself never scrolls sideways. The timeline's height is the host's. | docs/e2e/responsive.spec.ts — 320 px reflowdocs/e2e/responsive.spec.ts — 256 px tall reflowdocs/e2e/responsive.spec.ts — no horizontal page scrolldocs/e2e/responsive.spec.ts — an explicit orientation overrides the measurement |
| 1.4.11 Non-text Contrast | AA | Supports | An item's outline, the focus ring, the selection outline, the major ticks and the loading mark are at least 3:1 against what they are drawn on, in both themes. In forced colours every shape takes the reader's system colours instead — surface and item fill Canvas, outlines and text CanvasText, minor lines GrayText, focus and selection Highlight at 3 pixels — tested in a light and a dark palette. | core/test/a11y/contrast.test.ts — is at leastdocs/e2e/a11y.spec.ts — paint in the reader's system colours, wider where selected |
| 1.4.12 Text Spacing | AA | Supports | The element measures each label with the spacing it is drawn with — the reader's letter and word spacing, read off a drawn label — and measures and lays out again when that spacing comes or goes after load, with no resize or call: under WCAG's spacing (line height 1.5, letters 0.12em, words 0.16em, paragraphs 2em, all !important) every label of the element's test page keeps its whole text in a box that holds it, as without the spacing, also after it draws again at another size; the taller line stays centred in its box, nothing runs into the axis, the keys still work, and the item's accessible name keeps the whole label (tested on the element in its shadow root and on an instance in the page). Where the core's renderer is used directly, labels are measured with what the host passes as measureText, or, without one, with a font-free estimate that knows no spacing: a label the spacing widens past its box then ends in an ellipsis and is never cut through a letter, and its whole text stays in the accessible name (tested on the demo, horizontal and vertical). Spacing a reader turns on while transitions are switched off is measured at the next resize. | web-component/test/element.browser.test.ts — [claim:text-spacing] measures labels with the reader's text spacingdocs/e2e/a11y.spec.ts — text spacing (1.4.12): on the demodocs/e2e/a11y.spec.ts — text spacing (1.4.12): on the elementdocs/e2e/a11y.spec.ts — NEGATIVE CONTROL: text spacing |
| 1.4.13 Content on Hover or Focus | AA | Supports | The tooltip shows on hover and on keyboard focus, the pointer can move onto it and it stays, it does not time out, and Escape dismisses it and nothing else. | docs/e2e/tooltip.spec.ts — [claim:hover]docs/e2e/tooltip.spec.ts — [claim:hoverable]docs/e2e/tooltip.spec.ts — [claim:focus] |
| 2.1.1 Keyboard | A | Supports | Every gesture has a key, and a parity test holds each key to the command the gesture gives: pan, zoom, select, move, resize, change lane, add, remove, groups, time bars, the overview strip, range selection, the task grid. | core/test/keyboard/parity.test.ts — [cap:view.pan.later]core/test/keyboard/parity.test.ts — [cap:item.reach]core/test/keyboard/parity.test.ts — [cap:edit.lane.next]core/test/keyboard/entries.test.ts — [cap:item.add]core/test/keyboard/entries.test.ts — [cap:timebar.move]core/test/keyboard/entries.test.ts — [cap:range.select] |
| 2.1.2 No Keyboard Trap | A | Supports | The timeline is one focus stop; Tab and Shift+Tab leave it, Escape lets go of the focus and the selection, and keys it does not use stay the page's. | core/test/a11y/semantics.test.ts — is one focus stop, a listbox named and oriented for the readerdocs/e2e/a11y.spec.ts — Esc releases the focus and the selectiondocs/e2e/a11y.spec.ts — the other keys stay with the page |
| 2.1.4 Character Key Shortcuts | A | Supports | Single-character keys (+, -, g, n, r, [, ]) act only while the timeline has the focus; the host can replace the whole key table or switch the keys off with the gestures. | core/test/keyboard/navigation.test.ts — takes a table of the host's owncore/test/keyboard/navigation.test.ts — is off when the host says socore/test/keyboard/navigation.test.ts — leaves ctrl and meta to the browser |
| 2.2.1 Timing Adjustable | A | Supports | Nothing times out: the tooltip stays until it is dismissed, and nothing the library draws has a deadline. | docs/e2e/tooltip.spec.ts — [claim:persistent] |
| 2.2.2 Pause, Stop, Hide | A | Supports | Rolling mode, the one thing that moves on its own, stops as soon as the reader pans or zooms, and resumes only on follow(); transitions are short and arrive in one frame under reduced motion. | web-component/test/time-tools.browser.test.ts — keeps now in the view, lets go when the reader pansdocs/e2e/a11y.spec.ts — reduced-motion |
| 2.3.1 Three Flashes or Below Threshold | A | Supports | Nothing flashes: a zoom draws on every frame each label shown before it and after it, so no label blinks. | core/test/property/zoom-labels.test.ts — shows on every frame of a zoom each label shown before it and after it |
| 2.4.1 Bypass Blocks | A | Not applicable | A page-level criterion. The timeline is one focus stop, so it adds no block to bypass. | — |
| 2.4.2 Page Titled | A | Not applicable | A page-level criterion; the page is the host's. | — |
| 2.4.3 Focus Order | A | Supports | One focus stop, entered with Tab; inside it the arrows move in reading order. The date prompt for g is the host's: the demo's hands the focus back where it was, and the timeline keeps its focused item. | docs/e2e/a11y.spec.ts — Tab onto the timeline, every item by arrow keys, the focus is visibledocs/e2e/a11y.spec.ts — g, date, Enter: the view jumps there, and the focus returns |
| 2.4.4 Link Purpose (In Context) | A | Not applicable | The library draws no links; a link in a template is the host's. | — |
| 2.4.5 Multiple Ways | AA | Not applicable | A site-level criterion. | — |
| 2.4.6 Headings and Labels | AA | Supports | The listbox has the accessible name the host gives it; every button and word the library draws comes from the dictionary, so a host's language reaches all of them. | core/test/a11y/semantics.test.ts — is one focus stop, a listbox named and oriented for the readercore/test/i18n/i18n.test.ts — [claim:pseudo] |
| 2.4.7 Focus Visible | AA | Supports | The focused item is drawn with a ring that meets 3:1, in both themes, and the ring moves with the arrows. It follows the item's shape: a rounded rect round a bar, a circle round a point's dot, a diamond round a milestone's. The timeline's own outline is drawn inside its box, so a container with overflow: hidden does not cut it: every pixel of the four edges of a clipping card exactly the timeline's size is the outline's colour, and none is when the same outline is drawn outside (the control). In forced colours the ring and the outline take the reader's Highlight, the ring 3 pixels wide. | core/test/theme.test.ts — styles focus visiblydocs/e2e/a11y.spec.ts — the focus is visiblecore/test/a11y/contrast.test.ts — is at leastdocs/e2e/a11y.spec.ts — the focus outline is drawn inside the timelinedocs/e2e/a11y.spec.ts — paint in the reader's system colours, wider where selectedcore/test/item-kinds/item-kinds.test.ts — rings a focused point with a circle round its dotcore/test/gantt/gantt-draw.test.ts — rings a focused milestone with a diamond round its diamond |
| 2.4.11 Focus Not Obscured (Minimum) | AA | Supports | An item the keyboard moves to is brought into view with a margin, across the lanes too, so the focus is not hidden at an edge; at 320 pixels the element brings every item wholly into view. The bottom sheet the library opens over a narrow screen leaves the focused item in view, and the focus on the timeline (tested at 320 pixels, for every item). | core/test/keyboard/navigation.test.ts — brings an off-screen item into view, keeping a margincore/test/keyboard/navigation.test.ts — scrolls the lanes to an item across, both waysdocs/e2e/responsive.spec.ts — the bottom sheet never hides the focused itemdocs/e2e/responsive.spec.ts — 320 px reflow |
| 2.5.1 Pointer Gestures | A | Partially supports | Pinch and two-finger tap have single-pointer twins: a double tap zooms in, and zoom presets (zoomPresets) zoom out with one tap. Panning without a path takes the wheel or the keys; a one-tap pan control is not built in. | core/test/gesture/pointer.test.ts — zooms in on a double tap, about the tapped pointcore/test/gesture/pointer.test.ts — gives every gesture a programmatic twin |
| 2.5.2 Pointer Cancellation | A | Supports | A gesture ends on pointer cancel without acting, a drag is not an edit until it passes its threshold, and every edit is one command that undo takes back exactly. | core/test/gesture/pointer.test.ts — ends the gesture on pointercancel and stops panningcore/test/gesture/pointer.test.ts — holds the drag thresholddocs/e2e/touch.spec.ts — undo restores the starting state EXACTLY |
| 2.5.3 Label in Name | A | Supports | An item's accessible name starts with the label it shows. | core/test/a11y/semantics.test.ts — a name with its dates |
| 2.5.4 Motion Actuation | A | Not applicable | Nothing is operated by moving the device. | — |
| 2.5.7 Dragging Movements | AA | Partially supports | Every drag has a keyboard twin (Alt and an arrow moves, Shift and an arrow resizes, the arrows move a time bar), and zooming has buttons. Moving or resizing an item with single pointer taps, without dragging, is not built in. | core/test/keyboard/parity.test.ts — to the command a drag givescore/test/keyboard/entries.test.ts — [cap:timebar.move] |
| 2.5.8 Target Size (Minimum) | AA | Partially supports | Under touch, an item is hit from beyond its edges, and the dense layout raises even a mouse's target to 24 CSS pixels. In the comfortable and compact layouts a mouse target can be smaller than 24 pixels where items are short and close together. | core/test/hitslop/target.test.ts — dense raises even a mouse's target to 24 pxcore/test/hitslop/target.test.ts — a finger reaches a 2 px item it misses by 10 px along time |
| 3.1.1 Language of Page | A | Not applicable | A page-level criterion; the page's language is the host's. | — |
| 3.1.2 Language of Parts | AA | Not applicable | The words the library says are the host's dictionary, in the page's language; the labels are the host's data. | — |
| 3.2.1 On Focus | A | Supports | Focus changes nothing but the focus: it shows the tooltip and rings the item, and opens nothing, loads nothing and moves nowhere else. | docs/e2e/tooltip.spec.ts — [claim:focus]docs/e2e/a11y.spec.ts — Tab onto the timeline |
| 3.2.2 On Input | A | Supports | g only asks the host for a date (jumpRequest); the view changes when the host calls scrollTo with the date the reader confirmed, never on input alone. | core/test/keyboard/navigation.test.ts — asks the host for a date on g, and goTo centres it |
| 3.2.3 Consistent Navigation | AA | Not applicable | A site-level criterion. | — |
| 3.2.4 Consistent Identification | AA | Supports | The same function is called the same everywhere: every word comes from one dictionary, and the views say what the core says. | core/test/i18n/i18n.test.ts — [claim:english-equal]core/test/i18n/i18n.test.ts — [claim:pseudo] |
| 3.2.6 Consistent Help | A | Not applicable | A site-level criterion. | — |
| 3.3.1 Error Identification | A | Partially supports | A window that fails to load is marked on the axis, and the page stays free of accessibility errors; a move the host refuses (canMove) puts the item back without a message of the library's own — the host says why. | docs/e2e/a11y.spec.ts — the async page with failed windowscore/test/keyboard/parity.test.ts — [rule:veto] |
| 3.3.2 Labels or Instructions | A | Not applicable | The library draws no form field: the date prompt for g is the host's, and so are its label and instructions (the demo's is labelled, and passes axe with the prompt open). | — |
| 3.3.3 Error Suggestion | AA | Not applicable | The library takes no typed input: the date prompt for g is the host's, and so is what it says about a date it cannot read. | — |
| 3.3.4 Error Prevention (Legal, Financial, Data) | AA | Supports | The library saves nothing: every edit is one command with its own inverse, and undoing it restores the start exactly. | core/test/property/inverse.test.ts — inversedocs/e2e/touch.spec.ts — undo restores the starting state EXACTLY |
| 3.3.7 Redundant Entry | A | Not applicable | The library asks for nothing twice; it has no multi-step process. | — |
| 3.3.8 Accessible Authentication (Minimum) | AA | Not applicable | The library has no authentication. | — |
| 4.1.1 Parsing (Obsolete and removed) | A | Not applicable | Obsolete and removed in WCAG 2.2; for HTML it is always satisfied. | — |
| 4.1.2 Name, Role, Value | A | Supports | Every item has its role (option), name, state (aria-selected) and place; the listbox has its name and orientation; axe finds no violation on the demo, its variants and every documentation page with a live example. | core/test/a11y/semantics.test.ts — makes every drawn item an option with a unique iddocs/e2e/a11y.spec.ts — the demo in its initial statedocs/e2e/a11y.spec.ts — site: |
| 4.1.3 Status Messages | AA | Supports | Changes the reader did not cause by focus are announced politely: the calendar's period, the tools' announcements, through a polite live region. | web-component/test/calendar-view.browser.test.ts — the period keys and the buttons page the same way, and say so |
What falls short
The "Partially supports" rows, in short: panning with one pointer needs a drag, the wheel or the keys; moving or resizing an item without a drag takes the keyboard; a mouse target in the comfortable and compact layouts can be smaller than 24 pixels; and a refused edit carries no message of the library's own. Three limits stand under a "Supports": under WCAG's text spacing the element measures its labels with the reader's spacing, but a host that draws with the core's renderer and passes no measureText gets labels fitted by an estimate that knows no spacing, which then end in an ellipsis (never cut through a letter, the whole text in the item's name) (1.4.12); text-only enlargement does not reach the timeline's text, whose sizes are pixels — the browser's zoom is what enlarges it (1.4.4); and at 320 pixels the lanes can be wider than the view and scroll across inside the timeline, the keys bringing the focused item into view (1.4.10). And one thing has not been done at all: a manual test with a screen reader. Each is a known gap, not a hidden one; the accessibility guide says what a host can do about each in the meantime.