# 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 and textures turn on (below).
- Do not rely on color alone: combine dashed series (`dashed`), marker shapes (`pointShape`) and textures (`patterns`).

## Textures (patterns)

`patterns: true` adds a texture to the color of bars, areas, pie and donut slices and treemap tiles. The order is fixed like the palette: series 1 a 45° hatch, 2 a 135° hatch, 3 dots, 4 a cross, 5 vertical lines, 6 a crosshatch, 7 rings, 8 horizontal lines. Waterfall rises and falls, and treemap gains and losses, get opposite hatches. Legend keys carry the same textures, and so do PNG and SVG exports and `renderToSVG`. Use it for grayscale printing, color-blind readers and accessibility audits (WCAG 1.4.1 Use of Color).

```js
createChart('#chart', {
  type: 'bar',
  title: 'Use by age group',
  language: 'en',
  unit: '%',
  patterns: true,
  data: {
    labels: ['20s', '30s', '40s', '50s', '60s'],
    series: [
      { name: 'Mobile', data: [92, 88, 81, 70, 52] },
      { name: 'Desktop', data: [41, 55, 62, 58, 44] },
      { name: 'In person', data: [8, 12, 19, 31, 47] },
    ],
  },
});
```

The default `'auto'` draws no textures on screen and turns them on in high-contrast mode (`forced-colors: active`) and for printing; `false` never draws them. Heatmaps and calendars show values as the lightness of one hue, so they take no textures (values in cells, the tooltip and the table carry them).

## Keyboard moves emit hover

Moving with the arrows, `Home` and `End` emits the same `hover` event (the same `ChartPoint`) as the pointer, so dashboards that update a side panel on hover work from the keyboard too, and charts in a `group` follow. `Esc` emits `null`. `showTooltip()` from code emits nothing.

## Printing

When printing, the download button, ⋯ menu, zoom buttons and tooltip are hidden, a dark chart is redrawn in the light theme for white paper, textures turn on with `patterns: 'auto'`, folded legend items come back, and no chart is split across pages (`break-inside: avoid`). It all returns after printing. Nothing to set up beyond including 82chart.css.