Image accessible name set using aria

Pattern Checker

What does this mean?

This suggests that an image's accessible name has been set using aria-label or aria-labelledby instead of using the alt attribute.

For example:

<img src="photo.jpg" aria-labelledby="heading-1">

or

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

Where possible it is preferred to avoid using aria and the alt attribute performs the same function with additional benefits.

Impact on users

Not using the alt attribute means that if the image does not load, there is no visual assistance for users to understand what the image was trying to convey.

Use of aria-labelledby can result in repetitive descriptions for screen-reader users as it must reference copy elsewhere on the page. This might also result in less than appropriate copy being used to describe an image, or even a situation where the referenced copy is updated without realising it also provided a description for an image.

How to fix

Where possible remove usage of aria-label or aria-labelledby on images. Replace these with an appropriate alt attribute.

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

References

GOV.UK alt text guidance

Classification

Level: info
Tagged: best-practice

See all issues