Chart — accessibility

Roles and names

  • The plot is role="group" with aria-label (ariaLabel, required): what is plotted and in which unit, e.g. „Objem obchodů po fázích".
  • With onSelect each category is a real <button> with aria-pressed reflecting 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-category title („Nabídka — Moje: 8,2M Kč · Všechny: 21,3M Kč").

Not colour alone

  • Values are in text (value label above the mark, note below the category, title on 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-ink and 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 --accent outline 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 (--accent 4.5 : 1 on white, --ic-rose 3.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-motion through the global reduced-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-colors the marks fall back to the system colour and remain distinguishable by position and labels.

Source: docs/chart/chart.a11y.md · GitLab