Ensure <img> Elements Have Alternate Text or a Role of None or Presentation

WCAG requires all images to have alternative text to convey their purpose and meaning to users who rely on screen readers. 

Why It Matters

Without alternative text, screen readers have no way to explain an image to a user. Users who cannot see won’t understand images in relation to your content without the necessary alt text, creating a frustrating experience. 

Fixing the Issue

Developers need to ensure all <img> elements have short, descriptive alternate text and all decorative <img> elements have empty alt attributes (e.g. alt=””).

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 i.e. <img aria-label=”drawing of a cat” src=”…”>
• Using an aria-labelledby attribute i.e. <img arialabelledby=”someID” src=”…”>

Alt text should relay the purpose of an image to a user, so it should be clear and useful. For decorative images that do not require alternative text, provide “null” alt attributes (using alt=””). This tells screen readers to ignore an image. 

Good Code Example

Test Cases

For more examples, visit W3C’s GitHub’s ATC Rules library.