Images & icons
An Element Marked as an Image Has No Text Alternative
Something built to act as a picture has no description, so screen reader users hear "image" or nothing at all, and miss what it shows.
role-img-altWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevContentTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
Some pictures aren't built with an <img> tag. They might be a <div> with a background image, an icon font, or an inline SVG drawing. Adding role="img" tells screen readers to treat the element as one picture.
That picture still needs words. Without an aria-label or aria-labelledby, the screen reader can't say what it shows. People who can't see the screen miss the chart, the rating or the logo.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "image" or nothing, with no clue what the picture shows. | High impact |
| Low-vision users (magnification) | Those who use a screen reader or zoom with speech miss the description. | Partial impact |
| Cognitive and neurodivergent users | Text-to-speech tools skip the picture, so its meaning is lost. | Partial impact |
| Voice control users | Mostly unaffected, unless the image is also a control they need to name. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | Missing text alternatives are among the most common faults in complaints. WCAG 2.2 Level AA, which Australia's Disability Discrimination Act cases point to, requires them, as does EN 301 549. | High impact |
| Conversion | A star rating or product badge with no words can hide key buying information. | Moderate impact |
| SEO | Search engines rarely read `aria-label` on these elements. Don't expect a ranking gain. | Low impact |
| Brand trust | A logo or chart that says nothing makes the site feel careless to screen reader users. | Moderate impact |
| Cost to fix | Usually a single attribute. Fix it in the shared icon or chart component once. | High impact |
Fixing it in code
A star rating built from a div
Don't
<div role="img" class="stars-4"></div>A screen reader says: “image”
Do
<div role="img" class="stars-4" aria-label="Rated 4 out of 5 stars"></div>A screen reader says: “Rated 4 out of 5 stars, image”
aria-label gives the picture the words it was missing.
An inline SVG chart
Don't
<svg role="img" viewBox="0 0 100 50">…</svg>A screen reader says: “image”
Do
<svg role="img" viewBox="0 0 100 50" aria-labelledby="chart-title"><title id="chart-title">Sales rose 20% from March to June</title>…</svg>A screen reader says: “Sales rose 20% from March to June, image”
aria-labelledby points to a title that says what the chart shows.
Fixing it in design and content
Write what it means, not what it looks like
Don't
Label the rating "Four yellow stars".
A screen reader says: “Four yellow stars, image”
Do
Label the rating "Rated 4 out of 5 stars".
A screen reader says: “Rated 4 out of 5 stars, image”
People need the information, not a description of the drawing.
Designer's handoff note
For every icon, chart or graphic in your designs, note whether it carries meaning or is just decoration.
If it carries meaning, write the words a screen reader should say. If it's decoration, mark it so developers hide it instead.
Quick test
Tool
NVDA (opens in a new tab) (free for Windows)
Checklist
- Pass
- Each image is announced with words that say what it shows.
- Fail
- You hear just "image", "graphic" or a file name.
Check these at the same time
- An image has no text alternative
image-alt
What a green scan still misses
A scanner checks that some text exists. It can't tell whether the text is accurate, useful, or whether the picture should simply be hidden as decoration.
Reference
- Rule ID
role-img-alt- Raised by
- axe-core: “[role="img"] and [role="image"] elements must have alternative text”
- WCAG
- 1.1.1 Non-text Content (opens in a new tab) · Level A · since WCAG 2.0
- Other standards
- EN 301 549 9.1.1.1 · RGAA 1.1.1
- Last reviewed
- 14 October 2026