role-img-alt
Web validation
role="img" must have an accessible name provided through aria-label, aria-labelledby, title, or another valid method.Assistive technologies treat any element carrying role="img" as an image. When that element lacks a text alternative, people who rely on screen readers receive no information about what the “image” represents. Supplying a brief, descriptive text alternative ensures everyone can understand the content and purpose conveyed by the visual.
Pass Patterns
Accessible name via aria-label
The aria-label attribute provides a text description directly on the element.
<style>
.cart-ico {
background-image: url("/images/cart.svg");
}
</style>
<div role="img" aria-label="Shopping cart" class="cart-ico"></div>Accessible name via aria-labelledby
The aria-labelledby attribute references a visible element and uses its text as the accessible name.
<style>
.logo-container {
background-image: url("/images/logo.png");
}
</style>
<h4 id="logo-desc">Evinced company logo</h4>
<div role="img" class="logo-container" aria-labelledby="logo-desc"></div>Accessible name via the title attribute
The title attribute provides an accessible name when no other labeling method is used.
<style>
.warn-ico {
background-image: url("/images/warning.svg");
}
</style>
<div role="img" class="warn-ico" title="Warning"></div>Fail Patterns
No text alternatives
The element has no aria-label, aria-labelledby, or title, so it has no accessible name.
<style>
.cart-ico {
background-image: url("/images/cart.svg");
}
</style>
<div role="img" class="cart-ico"></div>Empty aria-label value
An empty aria-label provides no name.
<style>
.logo-container {
background-image: url("/images/logo.png");
}
</style>
<div role="img" class="logo-container" aria-label=""></div>Invalid alt attribute on a <div> element
The alt attribute is only valid on elements such as <img>, so it doesn't name a <div>.
<style>
.warn-ico {
background-image: url("/images/warning.svg");
}
</style>
<div role="img" class="warn-ico" alt="Warning"></div>Using a text node as the only description
Text inside the element with role="img" does not contribute to the accessible name, so screen readers announce it as unnamed.
<style>
.cart-ico {
background-image: url("/images/cart.svg");
}
</style>
<div role="img" class="cart-ico">Shopping cart</div>Empty title attribute
An empty title provides no name.
<style>
.warn-ico {
background-image: url("/images/warning.svg");
}
</style>
<div role="img" class="warn-ico" title=""></div>WCAG techniques
Sufficient techniques
Failure techniques
- F3: Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background images
- 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"
ACT Rules
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Move the virtual cursor onto the element with
role="img".
Expected results: The screen reader announces a meaningful description.
Actual results: Nothing (or “graphic”) is announced, so the user cannot perceive the content.
Inspecting the browser dev-tools
- Inspect the page in devtools and open the Accessibility pane.
- Select an element with
role="img". - Check the Name field.
Expected results: The Name field lists the alternative text supplied via aria-label, aria-labelledby, or title.
Actual results: The Name field is empty, confirming the missing text alternative.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 Non-text Content requires every non-text element to have a text alternative that serves the same purpose. An element carrying role="img" is treated as non-text content, so an accessible name is mandatory.
Why is this issue marked as Serious?
Without an accessible name, users who rely on screen readers receive no information about the image. They may miss essential cues, instructions, or branding. Because the problem creates a direct barrier to perceiving content across all modern browsers and assistive technologies, its impact is considered serious.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.1.1 Non-text Content (A) | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content. |
| EN 301 549 | 9.1.1.1 Non-text Content | Same as the WCAG text. |
| 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). |
| 508 Trusted Tester | 1.1.1-meaningful-image-name, 7.A | The accessible name and accessible description for a meaningful image provides an equivalent description of the image. |
| 508 Trusted Tester | 1.1.1-decorative-image, 7.B | There is no accessible name and accessible description for a decorative image. |