Keyboard-Navigable Interactive Charts

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

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

A focusable point that announces nothing is useless. Give each one an accessible name stating its label and value, like March, 240 sales.

Tabbing through 100 points is painful. Use arrow keys to step point-to-point and reserve Tab for jumping in and out of the chart.

Keep one point at tabindex 0 and the rest at -1, moving the 0 as arrows fire. This roving tabindex keeps the Tab stop count sane.

Whatever a tooltip shows on hover, show on focus as well. Pair every mouseenter handler with a focus handler so both inputs match.

Highlight the currently focused point with a clear outline or marker. Without it, keyboard users have no idea where they are.

When focus moves to a new point, an aria-live region can speak its value. This helps when the label is rendered visually but not in the DOM.

Wrap the whole thing in a figure with a name so users can find it and skip it as one unit when they are done exploring.

Interactivity is a bonus, not a replacement. Always keep the plain data table so users have a simple path when arrow-stepping is too slow.

Put the mouse away and drive the chart with Tab and arrow keys only. If you cannot reach every value, your users cannot either. ⌨️

How should a keyboard user step between many data points in a chart?

You learned to make points focusable and named, move with arrows via roving tabindex, mirror hover on focus, and always keep a table fallback. 🚀