A data visualisation is any graphic that turns numbers into a picture. To WCAG it is non-text content like any other, so what it needs is a text alternative that serves the equivalent purpose, and that phrase is the whole argument. The purpose of a chart is the finding, so an alternative that names the object has not served it. For something this complicated the working pattern is two-part. A short description saying what the chart is and where the longer one lives. Then a longer description carrying the information the chart conveys, which usually means the numbers themselves on the page as a real table or a paragraph. The failure has a name in W3C's own list. A text alternative you could not put in place of the image without losing something is not an alternative.
In practice
Write the finding rather than the object. The chart is on the page because somebody looked at a column of numbers and could not see the shape in it, so the alternative has to carry the shape. Roughly the sentence you would use describing it to somebody across a desk. Composition can be part of the information too, because the order of the colours and the relative heights of the bars may be exactly what a reader is meant to take from the picture.
How the two halves connect matters as much as writing them. W3C names four ways. A text link beside the image. A note in the short alternative saying where the long one lives. A figure element wrapping the image and its caption. Or a description reference pointing from the image to the text. Picking none of them is the common outcome, and then the data sits on the page unattached to the thing it explains.
Colour usually does too much work. Default charting output gives each series a hue and puts a key beside it, which asks the reader to look up a colour. Roughly one man in twelve of Northern European descent has a red-green colour vision deficiency, and the figure is lower in other populations. Labelling each series where it sits removes the lookup entirely. One more rule reaches a chart and gets forgotten. Bars, lines and points are graphical objects, so whichever parts of them a reader needs to make sense of the chart have to clear 3:1, unless that particular presentation is essential to what is being conveyed. And one rule people expect never arrives. Exporting the chart as a flat image does not turn its axis labels into images of text, because the definition of that term leaves out text sitting inside a picture that carries significant other visual content. The labels still have to be readable, and everything the chart says still has to reach somebody through the alternative.
Why it matters
The chart is on the page because the numbers were hard to read as numbers. An alternative that says bar chart of quarterly sales has described the container and thrown away the contents, which is the one thing it was not allowed to do. It is also worth knowing how little of this a machine can check. A scanner can tell you an alternative exists. It cannot tell you whether it says anything, because whether a sentence carries the finding is a judgement about your data rather than a fact about your markup.
Object or finding
Sales chart names the object. Sales fell 40% across the year, with most of the drop in the final quarter, states the finding. The test W3C sets is whether you could delete the chart, put the words in its place, and lose nothing.
Where this shows up on the site
Related terms
- Alt textAlt text is the written description attached to an image, and it is what a screen reader reads out in place of the picture.
- Color blindnessColor blindness is a reduced ability to tell certain colors apart, and the figure everybody quotes, roughly 1 in 12 men and 1 in 200 women, is for red-green deficiency among people of Northern European descent.
- Contrast ratioA contrast ratio is a number from 1:1 to 21:1 measuring how far apart two colors are in brightness, computed from a formula rather than judged by eye.
- Semantic HTMLSemantic HTML means using HTML elements for what they mean rather than for how they look.
- Screen readerA screen reader is software that reads the screen out loud, or sends it to a braille display, for people who cannot see it.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.