Imagine opening this page on a slow phone connection. The media should still be worth the wait and have a sensible fallback.
What You Need to Know
A dense infographic usually needs more explanation than a one-line alt description. Write a brief alt value and place its numbers, relationships, or conclusions in nearby readable text.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<figure>
<img src="images/reading-chart.png" alt="Bar chart comparing books read by class groups; numbers follow" width="700" height="420">
<figcaption>Books read: Group A 8, Group B 13, Group C 11.</figcaption>
</figure>
<p>Group B read the most books 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: The brief alt announces the kind of chart; nearby text gives the detailed values and main conclusion.
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
Add one more group and update the alt, caption, and conclusion together.
Common Beginner Mistakes
- Expecting the page to run scripted behavior when the required JavaScript is missing.
- A long image filename is not a useful description of data.
Key Takeaways
- A dense infographic usually needs more explanation than a one-line alt description.
- <img>: The img displays a picture; its alt is the text alternative.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.