Chart Legend Accessibility

Best Practices

Use a description list so each legend key is programmatically associated with its value. The legend must have an accessible name that identifies the chart it describes.

Color must not be the only way to associate a legend entry with chart data. Provide matching text, patterns, or symbols in the chart.

Interaction Design

Keyboard

A static chart legend is not included in the keyboard tab order.

Screen Reader

A screen reader announces the legend name, followed by each term and its associated value in source order.

Pointer

A static chart legend has no pointer interaction.

ARIA Reference

AttributeDescription
aria-labelNames the description list and identifies its related chart.

Further Reading

Ccd ComponentCheckbox Component