A webpage should make sense even when someone cannot see its colors, pictures, or layout.
What You Need to Know
When an image is the only content inside a link, its alt text becomes the link's accessible name. Describe the destination or action, not merely the colors or shapes in the picture.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<a href="/robotics-project">
<img src="images/robot-card.jpg" alt="Read about our robotics project" width="360" height="220">
</a>
<p>The image is the link, so its alternative text tells people where it goes.</p>Let’s Read the Code
- <img>: The img displays a picture; its alt is the text alternative.
- href: Href is the URL to a related resource or destination.
- src: Src identifies a resource path for images, frames, or media.
What the example shows: When an image is the only content of a link, its alt text should communicate the link destination or action.
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
Change the destination to a garden project and rewrite the alt text to match.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Avoid empty alt on an image-only link unless another accessible name is supplied.
Key Takeaways
- When an image is the only content inside a link, its alt text becomes the link's accessible name.
- <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.