Image Accessibility

Using images on the web is a great way to grab attention. However, we need to design our page to be accessible to everyone. In this exercise, we will learn how to make images accessible to screen reader users.

Here is an example of an image that we created in the previous lesson:

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

For such an image, the screen reader would skip over it. But what if the image is not just decorative but conveys information to the user? In that case, it is important to add the alt attribute and provide a textual description of the image. For example:

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

Adding the alt attribute ensures that the screen reader will read the value of the alt attribute aloud. In the case of an image with purely decorative purpose, it is still recommended to add an alt attribute with an empty value like this:

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