Images play a huge role in how we understand content online. They can explain ideas, add decoration, or communicate information that words alone might not. But what if you can’t see the screen? For people using screen readers, an image is invisible unless the developer provides an alternative text description.
That’s why any element that’s given role="img" must also have accessible alternative text. Without it, the image provides no value to a blind or low-vision user.
WCAG Success Criterion
1.1.1 Non-text Content (Level A)
All non-text content that conveys information must have a text alternative that serves the same purpose.
When an element uses role="img", it is treated as an image by assistive technologies.
If no accessible name is provided, users of screen readers will not know what the image represents.
Example:
A <div role="img" aria-label="Company logo"></div> meets this requirement because it provides a meaningful text description.
But <div role="img"></div> fails because there is no text alternative for the visual information.
4.1.2 Name, Role, Value (Level A)
User interface components must expose their name, role, and state to assistive technologies.
When you set role="img", the role is defined, but the name (the alternative text) must also be available.
Without a name from aria-label, aria-labelledby, or title, the image remains inaccessible to screen reader users.
These criteria ensure that every visual element marked as an image communicates its purpose clearly through text for users who cannot see it.
Why Alternative Text Matters
Screen readers can’t “see” an image. They can’t describe the colours, shapes, or text inside it on their own. Instead, they rely on a text alternative provided in the markup.
Here’s the difference:
- Without alt text, the screen reader might only announce “image” with no further context.
- With alt text, the screen reader can say “Cup with coffee” or “Company logo.”
For someone who can’t see the screen, this description is the only way to understand what the image means.
How to Add Alternative Text to role=”img”
When you mark up an element with role="img", you’re telling assistive technologies: “This element should be treated like an image.” That means you must give it text that explains what it is.
There are four valid ways to do this:
1. Using aria-labelledby (points to another element with text):
<div id="match">Bananas</div> <div role="img" aria-labelledby="match"></div>Screen reader announces: “Bananas, image.”
2. Using aria-labelledby with hidden text (even if the text isn’t visible):
<div id="hidden-match" style="display:none">Banana bombs</div>
<div role="img" aria-labelledby="hidden-match"></div>Hidden text still works for screen readers, so this passes.
3. Using aria-label (directly embedding the description):
<div role="img" aria-label="match"></div>4. Using title (as fallback):
<div role="img" title="A red ball"></div>All four give the image a proper accessible name.
Incorrect Examples
Here are common mistakes and why they fail:
1. No description is provided → the screen reader simply says “image.”
<div role="img"></div>2. Empty aria-label → overrides everything else, but says nothing.
<div role="img" aria-label=""></div>3. The alt attribute only works on < img>, not on < div>. This has no effect.
<div role="img" alt="blah"></div>4. Points to an ID that doesn’t exist → no label available.
<div role="img" aria-labelledby="Blue-ball"></div>
<!-- The element with id "Blue-ball" does not exist -->5 Empty title → useless because it adds nothing.
<div role="img" title=""></div>Writing Good Alternative Text
When you write alt text for a role="img" element, ask yourself:
- What is this image showing?
- Why is it here?
- What message or information should it give if someone can’t see it?
Examples:
- Instead of “chart,” write “Bar chart showing sales from January to June.”
- Instead of “logo,” write “Acme Corporation logo.”
- If the image is decorative only, don’t use
role="img"at all, just leave it hidden from assistive tech.
Keep it short, descriptive, and meaningful.
Rule Description
Any element with role="img" must include alternative text. This ensures screen readers can announce it properly to users.
The Algorithm (Simple Terms)
Accessibility tools check:
- Does the element with
role="img"have a label from aria-label, aria-labelledby, or title? - If yes, it passes.
- If not, it fails.
Wrapping Up
If you mark something as role="img", you’re responsible for giving it a voice. Without alternative text, the element is just a silent box on the screen for users of assistive tech.
So remember:
- Always provide aria-label, aria-labelledby, or title.
- Never leave labels empty or broken.
- Use meaningful descriptions that explain the purpose of the image.
That way, your images aren’t just visual, they’re accessible to everyone.
