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
Alternative text gives an image a useful meaning when it cannot be seen. For an informative photograph, describe what matters; for decoration that adds no information, an empty alt value lets assistive technology skip it.
In this example: audit an informational chart and a logo.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<figure>
<img src="images/student-robot.jpg" alt="A small robot moving along a marked track" width="700" height="420">
<figcaption>Our robotics experiment during class.</figcaption>
</figure>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 alt text explains the information in the picture, while the caption gives it context.
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
Describe another classroom photo without naming its file format.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Avoid writing “image of” unless it helps; screen readers already identify images.
Key Takeaways
- Alternative text gives an image a useful meaning when it cannot be seen.
- <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.