Alt text in images

The alt attribute is mandatory. It serves several important accessibility purposes. That’s why it is the first guideline of the Web Content Accessibility Guide (WCAG).

We all have seen the most well-known example of the purpose of alternative text: a broken image. In order to make the original intention of the image accessible even if it can’t load the image the browser displays the text as an alternative.

Child riding a bike
The alt text “Child riding a bike” is displayed when image is not loaded

Some browsers will display an icon of a broken image alongside the alt text, other browsers will display only the alt text.

This helps sighted people to understand the context of the image if the image itself could not be loaded. Likewise, screen readers read the alt text to disabled people who can’t see the image. Since most articles on the web are packed with media files alt text is crucial.

alt values

Depending on the type and purpose of an image the value of the alt attribute should be chosen accordingly.

1. In most cases it should be a short description of the content of the image.

2. If the image serves as a link to a different page then the alt text should describe the target of the link, i.e. where the user will be taken when clicking on the image.

3. If the image is purely ornamental an empty alt attribute should be added.

<img src="floral-border.png" alt="">

If an image has a caption it may seem redundant to also add descriptive text in the alt attribute. However, search engines will benefit from a description of the image in the alternative text.

alt and screen readers

For people using a screen reader the value of the alt attribute is read to them since they can’t see the image itself. It is therefore important that the description is short yet meaningful.

If the alt alt is missing a screen reader will read the image file name instead, which in most of the cases is not very useful.

alt and svg

There is no alt property for svg images, however if inlined the svg’s title along with ARIA-roles will be used by screen readers to describe the svg graphic.

<svg xmlns="" aria-labelledby="a11y-icon" role="img">
<title id="a11y-icon">Web accessibility icon</title> <path ... >

Useful articles

About Uwe Kristen

After graduating in Scottish Literature at University of Glasgow in 1996 Uwe put down his empty glass and left the pub. He took the next airplane to New York City and started coding websites. He still codes. He still reads.