Chart — accessibility
Roles and names
- The plot is
role="group"witharia-label(ariaLabel, required): what is plotted and in which unit, e.g. „Objem obchodů po fázích". - With
onSelecteach category is a real<button>witharia-pressedreflecting the selection and an accessible name from the label and the values (title); without it a plain<div>whose text (label, value, note) a screen reader reads in order. - The legend is
aria-hidden: series identity is already in the value labels and in the per-categorytitle(„Nabídka — Moje: 8,2M Kč · Všechny: 21,3M Kč").
Not colour alone
- Values are in text (value label above the mark,
notebelow the category,titleon hover), so a reader who cannot tell the two series apart still gets both numbers. - Two series always come with a legend and the first-series value label; the palette passes the deutan and normal-vision floors on light and dark surfaces (validator, 16 October 2026).
- The selected category is marked by
aria-pressed, a bolder label in--accent-inkand a darker mark, not by colour alone.
Keyboard
- Selectable categories are buttons: Tab moves between them, Enter or Space toggles the selection, the focus ring is the DS 2 px
--accentoutline with a 2 px offset. - Read-only charts take no focus; the numbers are available to a screen reader as list items.
Contrast and motion
- Marks are ≥ 3 : 1 against both surfaces (
--accent4.5 : 1 on white,--ic-rose3.6 : 1). - Labels use text tokens (
--fg,--fg-secondary,--fg-muted), never the series colour. - The only transition is the 120 ms hover tint of the mark; it respects
prefers-reduced-motionthrough the globalreduced-motion.css.
Known gaps
- No built-in table view; the host must provide the numbers elsewhere (list under a selected category or a table toggle). Tracked for the canon decision.
- No texture fill for the forced-colours case yet; in
forced-colorsthe marks fall back to the system colour and remain distinguishable by position and labels.
Source: docs/chart/chart.a11y.md · GitLab