Accessibility

• A visible headline that states the takeaway, in page text above the chart. See Title and subtitle.
• A short text alternative on the chart itself: the chart type and the subject, such as "Line chart of weekly sign-ups, January to June".
• A longer description for anything that is not obvious from the headline: the trend, the extremes, the outliers. Put it in page text near the chart, where everyone can read it.

Keep the accessible name short. Instructions, conclusions and every data point in one label make it hard to listen to.

Put a data table near the chart, behind a "Show the data" toggle if space is short, or offer a CSV download. A table is easier to navigate with a screen reader than any chart, and it serves sighted readers who want exact figures too.

• Direct labels on lines, bars and slices.
• Dash patterns on lines.
• Different marker shapes on points.
• Textures or patterns on areas and bars.

Status colors need words as well: "+12%" with an arrow, not green alone. See Color.

Marks need a contrast ratio of at least 3:1, and text at least 4.5:1. Gridlines can be lighter, since the data does not depend on them. Use your browser's contrast checker on the actual series colors, not only the palette swatches.

• The chart takes a single tab stop. Tab moves past it, not through every point.
• Inside, arrow keys move between data points, and the focused point shows its values the way hover does.
• Focus is always visible, with a ring in the theme's focus color.
• Escape closes a pinned tooltip or cancels a drag.
• Every pointer-only control needs a keyboard path: a brush, zoom, legend toggle or drill-down. Use real buttons and range inputs.

A tooltip that holds the only copy of a value excludes touch, keyboard and screen reader users. Respect prefers-reduced-motion: draw the final state at once. See Interaction.

1. Use the page with the keyboard only.
2. Listen to the chart and its description with a screen reader.
3. Zoom the browser to 400%. Nothing should be cut off or overlap.
4. Turn on forced colors (Windows High Contrast). Marks should stay visible.
5. Simulate color vision deficiencies in the browser's developer tools.
6. Turn on reduced motion and reload.

For a full audit, work through Chartability. The WAI tutorial on complex images and the UK Analysis Function chart guidance cover text alternatives in more depth.