HTML Charts and Diagrams: Accessible Text Alternatives

Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.

What You Need to Know

If a chart contains important values, those numbers should not be trapped inside a picture. Provide a short description of the trend and a table or explanation when readers need the exact data.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<figure>
    <img src="images/sales-bars.png" alt="Bar chart of weekly sales; full values follow" width="700" height="400">
    <figcaption>Monday 20, Tuesday 35, Wednesday 28</figcaption>
</figure>
<table>
    <caption>Weekly sales values</caption>
    <tr><th scope="col">Day</th><th scope="col">Sales</th></tr>
    <tr><th scope="row">Monday</th><td>20</td></tr>
    <tr><th scope="row">Tuesday</th><td>35</td></tr>
    <tr><th scope="row">Wednesday</th><td>28</td></tr>
</table>

Let’s Read the Code

<img>: The img displays a picture; its alt is the text alternative.
src: Src identifies a resource path for images, frames, or media.
width: Width gives a preferred or intrinsic media width, depending on the element.

What the example shows: A chart can be paired with an ordinary data table so users can inspect its exact values without seeing the graphic.

What Happens in the Browser?

The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.

What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.

Your Turn

Change the Tuesday value and explain which text alternatives must also change.

Common Beginner Mistakes

Leaving out real media files or understandable text alternatives.
Do not rely on colors alone to communicate which bar represents a value.

Key Takeaways

If a chart contains important values, those numbers should not be trapped inside a picture.
<img>: The img displays a picture; its alt is the text alternative.
A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.