Not everyone uses a mouse to explore a website. Good HTML must also make sense through a keyboard or screen reader.
What You Need to Know
A diagram sometimes carries more information than fits in a short alt value. Give it a short label and put the detailed explanation in nearby text, where everyone can read it.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<figure>
<img src="images/science-results.png" alt="Graph of club attendance; complete values below" width="720" height="440">
<figcaption>Attendance by club: Science 42, Art 30, Music 25.</figcaption>
</figure>
<p>Science had the highest attendance in this example.</p>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: Short alt text identifies the chart and nearby text provides the detailed numbers and main message.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Add a fourth club and update the detailed description.
Common Beginner Mistakes
- Expecting the page to run scripted behavior when the required JavaScript is missing.
- A complex data graphic should not hide the only copy of essential information inside an image.
Key Takeaways
- A diagram sometimes carries more information than fits in a short alt value.
- <img>: The img displays a picture; its alt is the text alternative.
- If the resource cannot load, users still need enough text to understand what was meant to be there.