0Pricing
Web Accessibility Academy · Lesson

Keyboard-Navigable Interactive Charts

Let users explore data points without a mouse.

Hover Is Not Enough

Interactive charts often reveal values only on hover. Keyboard and touch users never hover, so that data is locked away from them.

Make Data Points Focusable

Let users Tab to each data point or series by giving them tabindex="0". Now the keyboard can reach what the mouse hovers.

<circle tabindex="0" role="img" aria-label="March: 240 sales" />

All lessons in this course

  1. Every Chart Needs a Text Alternative
  2. The Data Table Fallback
  3. Color, Pattern, and Direct Labels
  4. Keyboard-Navigable Interactive Charts
← Back to Web Accessibility Academy