chart

Docs › Interaction and export

Accessibility

Keyboard reading, an automatic summary, a hidden table and reduced motion.

82chart can be read with a screen reader and a keyboard without any setup, which is rare among free libraries.

Automatic summary

The outer element is role="figure" with a summary in aria-label, e.g. "Line chart, Monthly visitors. 2 series. Jan to Oct. This year: highest 80,100 (Oct), lowest 41,200 (Jan) …". The description option is read first.

Keyboard

KeyAction
TabEntering the chart shows the first value
← / →Previous / next x (↑/↓ for horizontal bars)
↑ / ↓Another series
Home / EndFirst / last value
Enter / SpaceSame as clicking the point (click event)
EscClose the tooltip
+ / - / 0Zoom in / out / reset (zoom: true)

Tooltip text is also announced through an aria-live region. Legend items are buttons with aria-pressed; the ⋯ menu works with the arrow keys and Esc.

Table and motion

  • A visually hidden <table> with every value is always present; table: true shows it.
  • With the OS "reduce motion" setting (prefers-reduced-motion) the first-draw animation is skipped; animation: false turns it off too.
  • In high-contrast mode (forced-colors) lines use the system text color.
  • Do not rely on color alone: combine dashed series (dashed) and marker shapes (pointShape).