Complex Images
Charts, diagrams, and infographics need extended descriptions. Use aria-describedby pointing to a paragraph, or provide the data in a table.
HTML
Intermediate
3 min read
Complex Images and Figures
Example
<!-- Complex chart with text description -->
<figure>
<img src="sales-chart.png"
alt="Sales chart 2024"
aria-describedby="chart-desc">
<figcaption id="chart-desc">
A bar chart showing monthly sales from January to June 2024.
Sales rose from $10k in January to a peak of $24k in May,
then declined to $18k in June.
</figcaption>
</figure> Pro Tip
When in doubt, provide the data as a table alongside the chart — it benefits everyone.