image-alt

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

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

• WCAG 1.1.1: Non-text content
• Deque University: image-alt
• Accessibility Insights: image-alt
• Evinced Digital Accessibility Knowledge Base: image-alt