You learned in the HTML course that the alt of <img> is “the place to write the description of an image.” In this lesson we go one step further and learn what to write, and how, so it actually gets across. For someone using a screen reader, someone whose image failed to load, and search engines, alt is the stand-in for the image itself.
Good alt, bad alt
Let’s compare using a photo on Shima’s page.
<img src="shima.png" alt="Photo of Shima" />| alt | Verdict | Reason |
|---|---|---|
alt="Image" | ❌ | You can’t tell what the image is at all |
alt="shima.png" | ❌ | A filename isn’t a description |
alt="Photo of Shima" | ○ | You at least get a rough idea |
alt="A fluffy white bird, Shima, perched on a branch" | ◎ | You can picture the scene even without seeing it |
The trick is to write it as if you were describing the photo over the phone. One or two sentences is plenty.
The same image, different alt depending on context
There’s no single “correct sentence” for alt. You write the role the image is playing in that particular scene. Even for the same photo of Shima—
- On a self-introduction page, as a face photo →
alt="A fluffy white bird, Shima" - In a how-to article on preening →
alt="Shima grooming feathers with its beak"
That’s because on the self-introduction page the image’s job is to show what Shima looks like, while in the how-to article its job is to show what Shima is doing. When you ask “what is this image responsible for conveying here?”, what to write falls into place naturally.
For graphs and diagrams, write the “conclusion” in alt
For information-packed images like graphs, diagrams, and screenshots, don’t describe the look—write the conclusion you want people to take away.
<img src="graph.png" alt="Shima's snack survey. Sunflower seeds are #1, making up half of the total" />With alt="Bar chart", only people who can see the image get the information in the graph. You don’t have to write out every last number. Write the reason you included that graph (the thing you most want to convey) in one or two sentences, and if the detailed figures matter, show them in the body text or a table too.
Decorative images get alt=""
There are also meaningless decorative images, like background patterns or divider lines. Writing “pattern image” or the like there is just noise for someone listening. Decorations get alt="" (empty).
<img src="border-flower.png" alt="" />alt="" is a deliberate signal that says “it’s fine to skip this image.” That’s different in meaning from forgetting to write alt at all, so even for decorations, always write alt="".
For images that are links, write the “destination”
Clicking the logo takes you back to the top—for such a link image, the alt isn’t the look but what happens when you press it.
<a href="/">
<img src="logo.png" alt="Back to the top page" />
</a>Someone listening hears “link, back to the top page” and can press it with confidence. With alt="Logo", they can’t tell where pressing it leads.
Summary of this lesson
- alt is the image’s stand-in. Test it by “does the story still make sense with the image removed?”
- Decorative images get
alt="". Never leave an image without alt - For link images, write the destination or action, not the look