Chart alt text tends to say chart, or graph, or sales chart. None of those describes anything. The reader knows there is a chart, and that it is about sales, and they still do not know that sales fell 40 percent, which is the entire reason the chart is on the page.
Lead With the Finding
The question to answer is why we put this here, not what is in this picture. A chart is an argument, and the alternative has to make the same argument. W3C's own instruction for a longer description asks for the trends and the implications comparable to those available from the chart, which is a stronger brief than describing shapes.
| Approach | What it says | Verdict |
|---|---|---|
| Names the object | "Bar chart of quarterly sales" | Useless |
| Describes the shape | "Four bars, decreasing left to right" | Better, and it still makes the reader do the work |
| States the finding | "Quarterly sales fell from $1.2m in Q1 to $720k in Q4" | This is the one |
If the chart shows a trend, name the trend. If it exists so people can look up individual values, the alternative is a table rather than a sentence, because no sentence carries twelve data points.
The Two-Part Pattern, and How the Second Part Attaches
Anything beyond a simple trend needs two things. A short description identifying the image and, where it helps, saying where the long description is. Then the long description itself, which is a textual representation of the information the picture holds.
The half we used to leave out is how the two connect, and it matters because the obvious guess produces something unusable. W3C names four ways to attach a long description. A text link next to the image. Describing the location of the description inside the alt attribute itself. A figure with role="group" holding the structured description in its figcaption. Or aria-describedby for a description that is text only.
That last one is the trap. A description attached with aria-describedby is treated as one continuous paragraph, and screen readers get no structural information from it, so no headings and no table. Attach a data table that way and forty numbers arrive as one unbroken sentence. Use the figure route for anything structured, or put the description in the page as ordinary content. Our fix guides cover a long description linked beside the image and one in the nearby text.
Putting the data table next to the chart is not a compromise for disabled users, and W3C's argument for it names who gains. People with low vision, people with learning disabilities, and anybody without subject-matter expertise in what they are looking at, which on a dashboard is most of the audience. Our tables guide covers marking it up.
A details element keeps the table out of the way until somebody asks for it, with one condition. Content inside a closed details is not exposed to assistive technology until it is opened. That is fine for a table supplementing a chart that already carries its finding in the alt text. It is not fine when the table is the only alternative the chart has.
Color Is Doing Too Much Work
The default output of every charting library maps each series to a color and puts a color key beside the chart. For roughly one man in twelve, and one woman in two hundred, that key is unreadable.
The fixes are in order of how much they buy you, and the first two are worth more than the ones people usually start with.
- Label the series directly, on or beside the line, rather than in a key the reader has to hold in their head and match by hue.
- Consider fewer series. W3C raises simplifying the image as a remediation option in its own right, and a chart with four lines instead of twelve solves the color problem, the legend problem and the description problem at once.
- Vary more than hue. Dashed against solid, different point markers, hatched against solid fills.
- View it in greyscale. If the series become indistinguishable, the color rule has a problem with your chart. That test works for a reason worth knowing rather than as a superstition. Two colors differing in lightness by 3:1 or more count as an additional visual distinction in their own right, so color is no longer the only means, and greyscale is what lightness looks like on its own. That gives a designer a number to aim at instead of a squint.
One limit on that escape. It does not apply where the content relies on the reader identifying a particular color. A legend that says the red line is Europe has made the color itself the information, and no amount of lightness difference rescues that.
There is also a contrast requirement on the graphical objects themselves, and it steps back further than most people realize, in four situations. Where a graphic has text or labels overlaid conveying the same information, which is what step one above just did for you. Where the graphic is decorative. Where the information is available in another form, such as a table that follows the chart or appears when a long description button is pressed, which is what the section above just did for you. And where the graphic is part of a logo. So doing the two useful things removes the obligation, and the 3:1 contrast check is what you do when you have not done them.
When you do run that check, W3C publishes a test procedure that is more useful than a ratio calculator. Identify each graphic carrying information needed to understand the content. Check its contrast against its adjacent colors. Where there are several colors or a gradient, test the least contrasting area. If that area is under 3:1, assume it is invisible and ask whether enough of the graphic remains to understand it. Note the unit as well. A graphical object is each important part of a complex diagram, so each line in a line chart is its own test rather than the chart being one.
One chart type has a documented exception and it is the one the advice above cannot reach. Where a color gradient represents a measurement, which is what a heat map is, that presentation counts as essential and the 3:1 requirement does not apply. The color rule still does, and the answer there is labels and values rather than hatching. And where the chart's text sits inside the graphic, that text has to meet 4.5:1 rather than 3:1, because it is text.
One failure worth naming because it fails two criteria at once. A text alternative that leaves out the information the colors were carrying, so sales by region on a chart where each region is a color and the alt text never says which is which. That one is filed against both the non-text content rule and the color rule.
Interactive Charts, and the Role That Closes the Door
A chart you can hover, filter, zoom and drill into is an application rather than an image, and the standard advice for a static chart actively fights that.
role="img" with an accessible name is the right answer for a static SVG chart, and the reason is narrower than we used to say. Some popular browser and screen reader combinations do not pronounce the accessible name of an svg element at all, and an explicit role="img" resolves it. What that role also does is flatten the graphic into a single opaque object, pruning everything inside it. So it is exactly wrong for a chart somebody is meant to explore, because it hides the focusable data points you just built.
There is a specification for the other case that almost nothing on the web uses. W3C published a graphics module as a Recommendation in 2018, with three roles for structured graphics where the layout carries meaning. graphics-document for the chart as a whole, which unlike an image allows navigable content inside it. graphics-object for a distinct part with semantic meaning, such as a series or a plotted region. And graphics-symbol for a marker whose meaning matters more than its appearance. Those are the roles for an explorable chart, and choosing between them and role="img" is a decision rather than an oversight.
- Tooltips on hover need a keyboard equivalent, and they owe all three conditions, which are dismissible, hoverable and persistent. Persistent is the one chart libraries fail, because a tooltip that fades after a few seconds is not persistent, and it is the condition our own list used to leave out. Note that this covers custom tooltips. A browser-drawn
titletooltip is outside the criterion and fails the keyboard rule instead. The tooltip guide has the detail. - Focusable data points need names and values exposed, not coordinates, and that is where
graphics-symbolor a visually hidden text layer earns its place. - Filter changes announce through a live region, and the thing to announce is the new result count rather than the redrawn chart. The status rule covers the brief message and explicitly does not cover the results themselves.
The quickest improvement
Write one sentence under the chart saying what it shows. Visible to everybody, which serves screen reader users and every reader who finds charts hard to read, and it is the sentence your alt text needed anyway. In our own audits, most charts would be substantially better for it.
One honest limit
A scanner can tell you an image has no alt attribute. It cannot tell you your chart description names the wrong trend, or judge whether your series survive greyscale. The evidence for that is duller than the assertion. The rules that exist for non-text content are all still at proposed status and every one of them tests whether a name exists rather than whether it is right, and neither the hover criterion nor the status message criterion has any automated rule at all. So our data visualisation review is a human pass, and our method explains how it runs.