Command Palette

Search for a command to run...

Hectal
Phase 15Advanced16 of 19 in Data Visualization

Accessible Charts

Make every chart work for people who cannot see it, cannot use a mouse, or cannot tell colours apart: names, descriptions, table twins, keyboard paths and an honest audit.

A chart is a picture, and a picture means nothing to a screen reader unless you give it words. This phase starts from what a screen reader actually receives from the page (the accessibility tree), and shows what an SVG or a canvas hands over when you add nothing.

Then you add, one layer at a time, everything a person needs to get the same answer from the chart: a short name, a longer description written from the data, a real table next to the chart, a way to walk through the data with the keyboard, colours and motion that respect the reader, and a sound-based option as an idea.

You finish with a short audit you can repeat on any chart, and a build that makes the Lumen dashboard usable for Meera, the team's analyst who reads it with a screen reader. Every number in this phase was measured in a real browser.

Phase 15 · the story

Meera, data analyst

“I open the dashboard and my screen reader says "image", so I cannot tell what any of these charts say.”

Meera has been the team's analyst for three years. She knows the Lumen data better than anyone: which stations are busy, which months the model gets wrong, which numbers the board quotes. She reads the web with a screen reader, a program that speaks the page aloud.

On Monday she opens the new dashboard. The key numbers read fine, because they are plain text. Then she reaches the charts. The line chart of the whole year is announced as "image". The station bars are announced as "image". The heatmap and the dot map are silent. She is the person on the team who most needs these answers, and the dashboard shows her nothing.

Nobody did this on purpose. Each chart was drawn correctly, and each one looked right. This phase teaches the team to give every chart a name, a description, a table and a keyboard path, and to check the result with the same care they give the colours. By the end, Meera can get every chart's answer without seeing it.

In this phase

You will learn

  • Say what a screen reader receives from an SVG, from a canvas and from a chart with a proper name
  • Write descriptions from the data, with a table twin and keyboard navigation, and keep them in step when the data changes
  • Check contrast, zoom, motion and sound, and run a short audit on any chart
  • Make the whole Lumen dashboard usable without sight

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

  • src/parts/describe.js
  • src/parts/table-twin.js
  • src/charts/RidesLine.jsx
  • src/charts/StationsBar.jsx
  • src/charts/stations-stacked.js
  • src/charts/june-heatmap.js
  • src/charts/fleet-treemap.js
  • src/charts/station-map.js
  • src/charts/trips-canvas.js
  • src/styles/charts.css
0/7 · 0%
7 topics ~5 h 18 code blocks & diagrams
Start with the first topic
1
15.1

What a Screen Reader Hears

A screen reader does not look at your chart. It reads the accessibility tree the browser builds from the page, so an SVG with no name is "image" at best, and a canvas with nothing added is silent.

24 min 4 code practice

2
15.2

Short and Long Descriptions

A chart needs a short name that says the finding and a longer description that gives the shape, the extremes and the exceptions. Write both from the data, so they cannot disagree with the picture.

43 min 2 code practice

3
15.3

The Data-Table Twin

A real HTML table beside every chart holds the same numbers, and it works for screen readers, for keyboards, for people who want exact values and for anyone who wants to copy the data. Sort it, cap it, and summarise big data first.

53 min 2 code practice

4
15.4

Keyboard Navigation Through Data

People who cannot use a mouse need a way to walk through a chart's data with the keyboard. Make the chart one Tab stop, move with the arrow keys, show where focus is, and say each value aloud with a slider's text or a live region.

34 min 2 code practice

5
15.5

Contrast, Motion, Zoom and Sound

Accessibility is not only for screen readers. Check that marks have enough contrast in both themes, that the page reflows at high zoom, that motion respects the reader's setting, and consider sound as another way to hear a trend.

24 min 4 code practice

6
15.6

Auditing a Chart

Run a short, repeatable audit on every chart: a handful of yes-or-no checks, an automated scan with its limits understood, and a session with a real screen reader user. Automation finds a missing name. Only a person finds a useless one.

37 min 3 code practice

7
15.7

Build: A Dashboard Meera Can Use

Give every chart on the dashboard a name, a description written from its data and a table twin, add a day reader and a one-stop bar list for the keyboard, and say changes aloud. It answers Meera: she can now get each chart's answer without seeing it.

96 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Give the chart a name

The bars below have no role and no name, so a screen reader has little to announce.

Beginner
2

Write the description from the data

describe(rows) returns a fixed sentence, so the description is wrong as soon as the data changes.

Intermediate
3

Build the table twin

Build a table in #twin with the caption Rides per day, two column headings (Day, Rides) and one row per day.

Intermediate
4

One Tab stop and the arrow keys

Three station buttons each have tabindex="0": three Tab stops.

Intermediate
5

Audit the chart and fix it

This chart is a bare SVG, with no table. Make it pass an audit: role="img", a name with the finding, a visible description joined with aria-describedby, and a table twin in #twin with a caption and th scope="col" headings.

Advanced