Skip to main content

image-alt

Ensure <img> elements have alternate text or a role of none or presentation.

Severity: Critical

Description

For screen reader users to understand the goal and meaning of each image, alternate text is required.

Why is it important?

All visual information, including images, is totally useless if a user is visually impaired unless a digital text alternative is offered, allowing screen readers to translate the text into braille or sound. For those who are color-blind or have low vision, the same is true to different degrees.

Even if an image only contains text, screen readers are unable to convert it into words that the viewer can hear. As a result, images must have brief, elucidating alt text for screen reader users to grasp the contents and purpose of the image.

Examples

  • Success:
    • An alt attribute gives a clear explanation of the picture for users of assistive technology.
  • Failure:
    • No alternate text is provided for a picture. The file name used by assistive technologies to recognise the image is not descriptive. Some viewers won’t understand what the image is trying to say.

How to fix?

Ensure that every <img> element has alternative text and either role="presentation" or role="none" attributes. There are three main ways to add alternate text to an image:

  • Using an alt attribute i.e. <img alt="drawing of a cat" src="...">
  • Using an aria-label attribute i.e. <img aria-label="drawing of a cat" src="...">
  • Using an aria-labelledby attribute i.e. <img arialabelledby="someID" src="...">

Tags

cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a, ACT

References

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy