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

Ensure that all <img> elements include appropriate alternative text to convey their purpose and meaning to users who rely on assistive technologies.

About This Rule

This rule ensures that all images have appropriate alternative text, enhancing accessibility for users who rely on screen readers. Adhering to this guideline aligns with the following standards:

• WCAG 2.1 (A): 1.1.1 Non-text Content
• WCAG 2.0 (A): 1.1.1 Non-text Content

Why It Matters

Screen readers cannot interpret images directly. Without alternative text, users who are blind or have low vision miss out on the information conveyed by images. Providing descriptive alternative text ensures that all users have equal access to the content and functionality of a webpage.

How to Fix

To make images accessible:

• Informative Images: Add a concise and descriptive alt attribute to each informative image, summarizing its content or function. For example:
  

  <img src="cat.jpg" alt="A drawing of a cat">

• Decorative Images: For images that are purely decorative and do not convey meaningful information, use an empty alt attribute to allow screen readers to skip them:
  

  <img src="decorative-line.jpg" alt="">

• Complex Images: For images requiring more detailed descriptions, consider providing additional context within the surrounding text or using a <figure> and <figcaption> combination.

Alternative Text Writing Tips

When crafting alternative text, consider the following:

• Convey the intent, purpose, and meaning of the image.
• Avoid redundant phrases like "image of" or "picture of."
• Keep it concise but informative, typically under 125 characters.
• Ensure it complements the surrounding content without duplicating information.

Other resources

Below are some other resources you can check when dealing with image alt text approaches.

• A Simple Alt Text Decision Tree (HTML5 Specification)
• F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"
• H37: Using alt attributes on img elements
• H67: Using null alt text and no title attribute on img elements for images that AT should ignore
• ARIA10: Using aria-labelledby to provide a text alternative for non-text content