# Accessibility
URL: /diagrammatic/docs/accessibility

How a chart names itself to assistive technology, and where the numbers go.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

A chart is an image to a screen reader. `title` names it: the root `svg` gets `role="img"`, an `aria-label`, and an SVG `<title>`. `summary` adds a sentence in the figure's `<desc>`, which assistive technology reads after the title. A chart without a name is marked decorative with `aria-hidden`.

```
<Column
  title="Weekly deploys"
  summary="Deploys rose from 14 in week 1 to 31 in week 7, passing the goal of 25 in week 5."
  items={deploys}
  target={{ at: 25, label: "goal" }}
/>
```

Marks are pointer affordances and are not focus stops. When the numbers matter, render them in a table beside the figure, which is the accessible path and often the better reading for everyone:

- title

  Weekly deploys

- summary

  Deploys rose from 14 in week 1 to 31 in week 7, passing the goal of 25 in week 5.

- items

  - - label

      W1

    - value

      14

  - - label

      W2

    - value

      19

  - - label

      W3

    - value

      11

  - - label

      W4

    - value

      23

  - - label

      W5

    - value

      27

  - - label

      W6

    - value

      21

  - - label

      W7

    - value

      31

- target

  - at

    25

  - label

    goal

Show the data

| Week | Deploys |
| ---- | ------- |
| W1   | 14      |
| W2   | 19      |
| W3   | 11      |
| W4   | 23      |
| W5   | 27      |
| W6   | 21      |
| W7   | 31      |

fig. 01 · The figure and its table, from the same rows

## Color

The categorical palette clears color-vision-deficiency separation checks, and charts with two or more series draw a legend, so color is never the only key. Diverging forms pair a hue with a direction (left and right of zero), not hue alone.

## Motion

Charts are still by default. Flow trails and live-point pulses animate only when the chart or an ancestor carries `data-dg-motion` and `diagrammatic/styles.css` is loaded, and every motion rule sits inside `@media (prefers-reduced-motion: no-preference)`, so a reader who asks for reduced motion sees the still figure. The highlight fade is the only other transition; see [Motion](/diagrammatic/docs/motion).