Missing alt

Pattern Checker

What does this mean?

This is shown when an image is displayed with no alt attribute and no alternative accessible name has been provided.

For example:

<img src="photo.jpg">

Impact on users

A missing alt attribute means that screen-reader users will not receive any meaningful information about the image. Depending on the screen-reader, some may just report it as "Image" whilst some may read out the src attribute instead.

If the image was not just presentational then the screen-reader user will also miss out on whatever information it was trying to convey.

How to fix

If the image is purely decorative then an empty alt attribute should be added:

<img src="photo.jpg" alt="">

If the image is meaningful then use the alt attribute to present that information.

<img src="photo.jpg" alt="A diagram showing the location of the reference number in the top right of the paper form">

Remember that if your alt text is describing things which are not obviously apparant in the image you might need to add accompanying text alongside so all users can understand.

Sometimes, where the contents of the image are also presented immediately after the image on the page it might be appropriate to either use an empty alt attribute or preferably indicate the location of the description:

<img src="photo.jpg" alt="description shown below">
The reference number is located in the top right of the paper form

You generally want to avoid repeating content in the alt attribute, for example do not do this:

<a href="...">Print <img src="print_icon.svg" alt="print"></a>

as this will be read out to screen-reader users as "Link: print print".

Instead the following is sufficient:

<a href="...">Print <img src="print_icon.svg" alt=""></a>

References

GOV.UK alt text guidance

Classification

Level: warn
Tagged: best-practice

See all issues