Accessible Images

Alternative Text

One of the ways to make images more accessible to visitors using screen readers is to include alternative text for all images. We can include alternative text by using the alt attribute. The alternative text is shown when an image is unavailable. If the alternative text is descriptive, it might be useful when fixing image issues. If an image is not loaded due to missing image files or misspelled image files, we can infer the missing image by the alternative text. Some users may want to view or can view only the text portions of the web pages. These users might find the alternative text helpful. When some browsers don’t have support for newer image types, then they show the alternative text. Finally, many search engines can match search queries with the web page using text in the alt attribute.

If you feel that you have given enough information about the image inside your main content, then it is perfectly acceptable to leave the alt attribute with empty text. This will allow screen readers to skip these images. Don’t waste someone’s time with redundant alternative text.

figure and  figcaption elements

Sometimes we may want to include additional text related to the image like a caption. Usually, the image and the caption need to be shown together. This can be done by using the figure and figcaption elements. The figure element is used for defining figures as used in traditional media like books and journals. The figcaption element is used for providing a caption for the figure. Images can be figures in HTML.


<figure>

<img src="example.png" alt="An Example image">

<figcaption>The caption is written here</figcaption>

</figure>

Usually, figures in books and journals are illustrations and diagrams. Since the web is a multimedia platform, figures can be:

  • images
  • audio
  • video
  • tables
  • equations
  • code snippets

Since the content inside the figcaption is available for both normal visitors and visitors using screen readers, we can use it to describe the image. When the image is not available both the alternative text and caption are shown. So we should not repeat the same text in both places.