Ensure [role="img"] elements have alternative text

Elements with role="img" must include accessible alternative text to convey their purpose and content to users relying on assistive technologies.

About This Rule

This guideline ensures that elements with role="img" have accessible alternative text, enhancing accessibility for users who rely on screen readers. Adhering to this practice 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
• WCAG 2.2 (A): 1.1.1 Non-text Content
• Section 508: 1194.22(a) - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)
• Trusted Tester: 7.A
• EN 301 549

Why It Matters

Screen readers cannot interpret visual content without accessible alternative text. Providing descriptive text for elements with role="img" ensures that users with visual impairments can understand the content and purpose of these elements. :contentReference[oaicite:0]{index=0}

How to Fix

To enhance accessibility:

• Use aria-label: Add an aria-label attribute with a descriptive value to the element.
  

  <div role="img" aria-label="Description of the image"></div>

• Use aria-labelledby: Reference an existing element that contains the description using aria-labelledby.
  

  <div id="image-description">Description of the image</div>
  <div role="img" aria-labelledby="image-description"></div>

• Use title Attribute: Include a title attribute with descriptive text.
  

  <div role="img" title="Description of the image"></div>

Examples

Incorrect

A div with role="img" and no alternative text:

<div role="img"></div>

Correct

A div with role="img" and an aria-label:

<div role="img" aria-label="Description of the image"></div>

More Information

• 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