What TanStack Charts does to make tooltips work for keyboard and screen reader users, and what you add so that no reader depends on one.
What you get
Keyboard parity. Tab moves into the chart and focuses the first point. The arrow keys move in the order your focus mode sets, Home and End jump to the ends, and each step opens the same tooltip a hover would.
Announcements. The tooltip is a polite live region, so a screen reader reads its rows as focus moves, without interrupting.
Pinning. Enter or Space pins the tooltip of the focused point, and Escape closes it. A click does the same for the pointer.
A focus ring on the focused point, and the kit's focus outline on the chart, shown for keyboard focus only.
A steady anchor. With anchor: "pointer", keyboard focus still places the tooltip at the point.
What you add
The values somewhere besides the tooltip: labels, a summary or a table.
A name in every row. A color dot or an icon alone does not tell a screen reader user, or anyone who cannot tell the colors apart, which series a row is.
Values formatted for listening: a unit, a sensible number of decimals, a date in words.
A label on every button you put in a pinned tooltip.
Nothing essential only on hover
A tooltip is extra detail. Touch screens have no hover, a printout has no tooltip, and a reader who never moves into the chart never hears one. Whatever the reader must know goes in the title, the labels or a table next to the chart.
With focus: "group-x", each arrow key press moves to the next x value, and the tooltip lists every series there. A keyboard user then compares series at one date the way a sighted reader scans a column. Without it, they step through every point of every series one by one.
Pinned tooltips with controls
A tooltip that follows focus is inert: a display-only chart inside it stays visible but takes no focus. Once pinned, the tooltip becomes a non-modal dialog. Escape or dismiss() closes it and returns focus to the chart.
Render buttons and links only when pinned is true.
Name icon buttons with aria-label.
Keep the tab order inside the tooltip short and in reading order.
{pinned && (
<Button
size="small"
variant="text"
aria-label="Close energy details"
icon={<Icon name="chevron-up" />}
onClick={dismiss}
/>
)}
Quieter tooltips
A long tooltip read out on every arrow key press gets tiring. Set visibility: "pinned" to show and announce it only after Enter, Space or a click. Focus still moves and the focused point still shows its focus styles.
Keep the keyboard on
keyboard: false removes the chart from the tab order, and with it every keyboard path to the tooltip. Use it only for a chart that has no tooltip, or when another control on the chart, like a brush, is the whole task.
Check it
Tab into the chart and reach every value with the arrow keys.
Pin a tooltip with Enter, use its controls, close it with Escape.
Listen to the rows with a screen reader.
Tap the chart on a phone and confirm the values are reachable.
The Accessibility guideline has the principles that apply to every chart.