Interactive Charts A11Y

title: "Interactive Charts A11y — Making Dynamic Charts Accessible" description: "Learn how to make interactive charts accessible with keyboard navigation, live region announcements, and focus management for dynamic data visualization." weight: 9 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Interactive charts need keyboard navigation, live region updates, and accessible tooltips so all users can explore dynamic data.

## What You'll Learn

How to make interactive chart features accessible including tooltips, zooming, filtering, and data point selection.

## Why It Matters

Interactive features (tooltips, zoom, filter) are often mouse-only. Keyboard users and screen reader users cannot access these features without proper implementation.

## Real-World Use

A user hovers over a bar in a chart. A tooltip shows the exact value. The same information is also available by focusing the bar with Tab. An aria-live region announces the value.

## Accessible Tooltip

```html
<svg role="img" aria-label="Interactive sales chart"
     viewBox="0 0 500 300">
  <rect x="40" y="180" width="60" height="40"
        role="button" tabindex="0" focusable="true"
        aria-label="Q1: $1.2 million. Click for details."
        data-value="1.2"
        onfocus="showTooltip(event)"
        onblur="hideTooltip()"
        onkeydown="if(event.key==='Enter')showDetails('q1')"
        fill="#4a90d9"/>
</svg>

<div id="tooltip" role="tooltip" aria-live="polite" hidden>
  Q1 2026 Revenue: $1.2 million
</div>

<div id="chart-details" role="status" aria-live="polite">
  <!-- Dynamic details shown on click -->
</div>

Keyboard Navigation

// Arrow key navigation between chart elements
document.querySelector('[role="img"]').addEventListener('keydown', function(e) {
  const focusable = this.querySelectorAll('[tabindex="0"]');
  const current = document.activeElement;
  let index = Array.from(focusable).indexOf(current);

  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
    e.preventDefault();
    index = (index + 1) % focusable.length;
    focusable[index].focus();
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    e.preventDefault();
    index = (index - 1 + focusable.length) % focusable.length;
    focusable[index].focus();
  }
});

Common Mistakes

1. Tooltips only on hover

Tooltip information must be available on focus, not only hover.

2. No keyboard navigation between data points

Arrow keys should move focus between chart elements.

3. Live region updates without context

Announce what changed: "Q3 selected: $1.8 million" not just "$1.8 million."

4. Focus trap in interactive elements

Users must be able to Tab out of the chart. Do not trap focus.

5. No announcement for chart updates

When data changes, use aria-live to announce the update.

Practice Questions

1. How do you make chart tooltips keyboard accessible? Show the tooltip on focus (onfocus event) and hide it on blur (onblur event).

2. How do you announce chart data changes to screen readers? Use role="status" or aria-live="polite" on a container that updates with new information.

3. What keyboard keys navigate between chart elements? Arrow keys (Left/Right/Up/Down) for navigating between adjacent data points.

Challenge: Create an interactive bar chart where users can Tab between bars, see tooltips on focus, and hear announcements via aria-live.

FAQ

Mini Project

Create an interactive bar chart with Tab navigation, focus-triggered tooltips, arrow key navigation, and a live region for announcements.

What's Next

Learn about Data Visualization Alt Text and how to write effective alternatives for charts and graphs.