Field Notes

Alt text for charts: the data is the alt

A chart's alt text is one sentence that says what the chart shows. The numbers go in a table next to it, where a reader can move through them. An alt that holds twelve values is unreadable.

  • alt text
  • charts
  • data

A line chart of monthly signups. Twelve points. The usual alt text is one of two failures.

The first: alt="Chart of signups". True, and useless. The sighted reader sees that signups tripled. The screen reader user hears that a chart exists.

The second: alt="Line chart showing signups of 120 in January, 134 in February, 151 in March, 180 in April, ...". Every number is there, and none of them can be used. Alt text is announced in one pass. It cannot be paused, re-read, or navigated by column. By the time the reader reaches June, January is gone.

The pattern

Three parts, each doing one job.

The alt is the point. One sentence, the thing a sighted reader takes away in the first glance.

<img src="signups.png" alt="Monthly signups rose from 120 in January to 410 in June, with the steepest rise in May">

The data is a table. Right next to the image, in real table markup, so the reader can move cell by cell, row by row, and hear each header with its value.

<table>
  <caption>Monthly signups, January to June</caption>
  <thead><tr><th scope="col">Month</th><th scope="col">Signups</th></tr></thead>
  <tbody>
    <tr><th scope="row">January</th><td>120</td></tr>
    <tr><th scope="row">February</th><td>134</td></tr>
    ...
  </tbody>
</table>

The explanation is text. Whatever the article has to say about the chart, the trend, the anomaly, the comparison, goes in the paragraphs. That is where it belongs for every reader, not just the one using a screen reader.

If a visible table would clutter the layout, put it in a details element under the chart. "Show the data." Everyone benefits, including the sighted reader who wants the exact numbers.

What goes in the sentence

Write the alt the way you would summarize the chart to a colleague over the phone. Trend, range, and the one thing that stands out.

  • Bar chart of browser share: "Chrome leads at 64 percent, Safari second at 19, the rest under 6 each."
  • Pie chart of a budget: "Salaries are two thirds of the budget; equipment and travel split most of the rest."
  • Scatter plot: "Response time rises with payload size, roughly linearly, with three outliers above 2 seconds."
  • A chart that shows nothing in particular: "Weekly traffic, flat at around 2,000 visits with no clear trend."

The last one matters. "No trend" is information. A reader who is told only that a chart exists will assume it shows something.

Things that are not alt text

A long description in aria-describedby pointing at the table is good and supported. The longdesc attribute is dead. A title attribute is a hover tooltip, not an alternative. And a caption under the chart is for everyone and does not replace the alt, because the caption usually says what the chart is, not what it shows.

For agents

A generated chart should be emitted with its data. If an agent produces a chart image, it has the numbers, and it can emit the table in the same response. The alt is the summary sentence; the table is the data; a chart without the table is incomplete output, not an accessibility afterthought. The Alt Text Studio does not yet have a chart context; the agent ruleset covers this under AW-ALT-001 and the alt text procedure in agents.md.

Open the companion lab

Spotted something this note gets wrong?

Corrections and better examples are the best kind of message.

Send a correction