What This Rule Checks
When an element is given a role=”img” to represent an image, it must have an accessible name so that users relying on assistive technologies, such as screen readers, can understand its purpose. Without a proper name, users may be left guessing at what the image represents, leading to confusion and difficulty in navigating or understanding the content. An accessible name can be provided via attributes such as aria-label, aria-labelledby, or title.
For instance, imagine navigating a website without being able to see the images. A screen reader user encounters an element with the role of img, but there’s no description of what that image represents, making it difficult to understand the context.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.
Why This Matters
Elements with role=”img” are treated as images by assistive technologies. Without an accessible name, screen readers announce “image” with no description. If the image conveys meaning, this is a WCAG 1.1.1 violation.
How to Fix
- Provide a descriptive aria-label, aria-labelledby, or title attribute.
- Ensure that referenced elements in aria-labelledby exist and are correctly labeled.
- Avoid leaving these attributes empty, as it results in an inaccessible image role.
Code Examples
<!-- Element with role="img" but no name -->
<div
role="img"
class="icon-warning">
</div>
Copy
<!-- role="img" with aria-label -->
<div
role="img"
aria-label="Warning: action required"
class="icon-warning">
</div>
<!-- SVG with role="img" -->
<svg
role="img"
aria-label="Company logo">
<use href="#logo-symbol"></use>
</svg>
Copy
Common Mistakes to Avoid
- Assigning role=”img” without providing aria-label or aria-labelledby.
- Using role=”img” on decorative elements that should be hidden from assistive tech.
- Providing alt text that describes the icon appearance rather than its meaning.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: When writing alt text, describe the image’s function and meaning, not just its appearance. For complex images like charts, provide a brief alt attribute and a longer description in surrounding text or a linked resource.
Related WCAG Criteria
- 1.1.1: Non-text Content