The problem with complex images
For simple images a good alt text is enough. But a bar chart, a process graphic, or a data-rich infographic can't be squeezed into one sentence — it holds dozens of values, relationships, labels. Two barriers appear together here: the content is too extensive for an alt attribute, and the numbers are often baked in as text inside the image, where no screen reader can reach them.
Solution 1: the two-tier approach
The proven route separates overview and detail:
- A short alt text— names the type and key message: “Bar chart: revenue rose 40% from 2020 to 2024.” That's enough to know what it's about.
- A long description in the page content — the details as prose, a list, or a table right next to or below the image, visible to everyone. Not hidden, but a real part of the page.
This way everyone gets the full information: the screen-reader user via the long description, the sighted user via image and text.
Solution 2: the data table
The royal road for charts with numbers is a real HTML data table with the underlying values:
| Year | Revenue (€k) |
|---|---|
| 2020 | 500 |
| 2022 | 620 |
| 2024 | 700 |
Such a table is doubly valuable: screen readers read it out in a structured way (column, row, value), and sighted users can look up exact numbers that a chart only shows approximately. The chart stays the quick overview, the table is the precise source. Together they beat any image, however good, on its own.
Solution 3: no text in the image (or only with a backup)
The most common avoidable mistake: burning axis labels, legends, and values firmly into the pixel image. That text is:
- invisible to screen readers — it exists only as pixels;
- not enlargeable — a low-vision user can't grow it with text zoom, only pixelate it;
- not contrast-adjustable — the image colors are fixed.
Better: put important labels as real HTML text next to the image, or build the chart as an SVG with real text from the start — then the labels are selectable, readable aloud, and scalable.
Don't forget contrast
The graphic itself needs sufficient contrast too: adjacent bars or lines shouldn't differ by color alone (because of color blindness), but additionally by pattern, label, or brightness. “Recognizable even without color” is a good self-check for any infographic.
In short
- Short alt + long description in the visible page content.
- A real data table serves screen readers and precise readers.
- No baked-in text — use real HTML text or SVG text.
- Don't rely on color alone to distinguish data.