Chart

Keyboard

In ChartLegendSection, use the arrow keys and Home/End to move focus. Your app handles selection and state changes on Enter or Space. ChartTooltip only displays information.

Semantics

Identify each series with a label as well as a color. Include names and values in the legend, and provide a text alternative for the graph.

Checklist

  • Name ChartLegendSection and connect selection state so the arrow keys move focus and Enter or Space selects a series.
  • Show series names with markers. Use the correct names, values and units in ChartTooltip.
  • Provide the graph's values and trends in a table or text too.

For contrast, zoom and screen reader checks, see the common accessibility checklist.