Accessible charts: give the data more than one route
Design charts and diagrams so readers can find the main message, inspect the underlying relationships, and reach an equivalent explanation without depending on color or a short image label.
Decide what the visual is carrying
A chart compresses many comparisons into a shape. A flow diagram can show order, branching, or return paths at a glance. That compression is useful only if the reader can recover the information that matters. Before drawing, write one sentence naming the question the visual answers and list any values, exceptions, or relationships that the reader must be able to inspect.
This distinction helps separate a decorative image from a data-bearing one. A small label such as “Workshop attendance by month” names a chart, but it does not explain its values or direction. For a complex chart, plan both a brief identification and an adjacent text equivalent: a concise summary of the main point, plus structured details when the reader needs them. A table can expose exact values; a paragraph can explain a trend or sequence. Often both are useful.
Build a text route alongside the image
Keep the chart’s central takeaway close to the graphic, then make the detailed alternative easy to locate. A heading like “Chart data and explanation” is more helpful than a generic “More information” link. If the description sits elsewhere on the page, identify that location clearly. For a long description with headings or a table, preserve those structures as ordinary page content instead of compressing everything into one undifferentiated block.
Make the explanation genuinely equivalent to the decision the graphic supports. A temperature chart may need dates, units, a scale, missing observations, and a note about the highest and lowest readings. If the reader only needs to compare three category totals, a labeled table may be clearer than a dense visual. Keep units and category names consistent between chart and table so that readers can move between them without translating a second vocabulary.
Use more than color to distinguish series
Color can organize a palette, but it should not carry a series identity by itself. Pair each series with a direct label, a distinct line pattern or marker, or another visible cue that remains legible in grayscale and at small scale. A legend helps only when its symbols are easy to match to the marks; direct labels near the data can reduce that back-and-forth when the chart is simple.
This is a specific accessibility check, not a promise that the whole chart is accessible. WCAG 2.2 includes success criteria for non-text content and use of color, both Level A. The W3C’s Understanding documents explain those criteria but are informative guidance, while the Recommendation contains the testable requirements. Other needs, such as readable text, meaningful structure, and a usable surrounding page, still require their own review.
Review the whole reading path
Check the graphic and its alternative as a pair. Can a reader discover the visual’s subject, find the detailed account, compare exact values, and understand what the data cannot establish? Does the written explanation describe what is actually shown rather than adding a conclusion the data does not support? Keep the same date range, units, rounding, and uncertainty in every presentation.
Finally, inspect the chart at its real size and in a one-color print or grayscale view. Look for labels that collide, patterns that blur together, and a legend that is separated from the information it identifies. Ask someone to follow the text route without first seeing the graphic; this is a useful design review, not a substitute for testing with people who use the finished content and different access methods.
Try it yourself
- Write the question the chart answers, then list its values, units, exceptions, and relationships.
- Draft a one-sentence summary and choose a table, structured description, or both for the details.
- Replace color-only series coding with labels, patterns, markers, or another visible distinction.
- Compare chart and alternative for matching values, dates, rounding, and limits at the intended size.
Worked example: a fictional print studio schedule
Imagine a small studio comparing weekly attendance for three evening classes over four weeks. The chart uses different line colors, but the legend is far from the plotted lines. Redraw each series with a distinct marker and line pattern, then label the lines at their ends. Add a nearby table with the twelve weekly counts, class names, and a note that the figures are bookings rather than confirmed attendance. A short summary can state that one class rises over the period while another stays nearly level, but do not infer why: this small invented dataset contains no evidence about causes. Compare each table value with the plotted point, including the final week, before calling the two routes equivalent.
References & further reading
- W3C WAI: Complex Images ↗
- W3C WCAG 2.2 Recommendation ↗
- W3C WCAG 2.2 Understanding: Non-text Content ↗
- W3C WCAG 2.2 Understanding: Use of Color ↗
Examples and exercises in this guide are original teaching scenarios.
