How a chart names itself to assistive technology, and where the numbers go.
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:
Show the data
| Week | Deploys |
|---|---|
| W1 | 14 |
| W2 | 19 |
| W3 | 11 |
| W4 | 23 |
| W5 | 27 |
| W6 | 21 |
| W7 | 31 |
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.