# Accessibility

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

Source: https://82chart.com/en/docs/accessibility/

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

| Key | Action |
| --- | --- |
| `Tab` | Entering the chart shows the first value |
| `←` / `→` | Previous / next x (`↑`/`↓` for horizontal bars) |
| `↑` / `↓` | Another series |
| `Home` / `End` | First / last value |
| `Enter` / `Space` | Same as clicking the point (`click` event) |
| `Esc` | Close the tooltip |
| `+` / `-` / `0` | Zoom in / out / reset (`zoom: true`) |

Tab into the chart below and use the arrow keys; what a screen reader hears is printed underneath. `table: true` makes the table visible.

```js
const chart = createChart('#chart', {
  type: 'bar',
  title: 'Quarterly revenue',
  prefix: '$',
  table: true,
  data: { labels: ['Q1', 'Q2', 'Q3', 'Q4'], series: [{ name: 'This year', data: [182000, 214000, 198000, 251000] }, { name: 'Last year', data: [160000, 171000, 190000, 205000] }] },
});
const live = chart.root.querySelector('[aria-live]');
new MutationObserver(() => live.textContent && log(live.textContent)).observe(live, { childList: true, characterData: true, subtree: 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`).