Image Accessibility

Images are a great way to catch attention. But we should build our pages so that everyone can use them, including people who can't see the images. Many blind and visually impaired people use a screen reader: a program that reads the page out loud. In this exercise, we will make our image accessible to them.

This is the image we created in the previous exercise:

<img src="/learn/html/cats.webp">

A screen reader can't see what is in a picture. For an image without a description, it usually reads out the file name instead, something like "cats dot webp", which doesn't help much. That is why we add the alt attribute (alternative text) with a description of the image:

<img src="/learn/html/cats.webp" alt="Six photos of domestic cats">

The screen reader then reads the description. A good description briefly says what is important in the picture.

Some images are purely decorative, for example an ornament or a background pattern, and say nothing. We give them an empty alt attribute, and screen readers then skip them:

<img src="/learn/html/ornament.webp" alt="">

The alternative text has one more use: the browser shows it when the image can't be loaded. You can try it once you have written the description: misspell the file name in src, click Run, and you will see your description instead of the photo. Then fix the name again.