Powered by
Images & icons
An SVG Marked as an Image Has No Text Alternative
The SVG is announced as an image, but with no name, so screen reader users hear "image" and never learn what it shows.
svg-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
Giving an <svg> the role img tells screen readers it's a picture worth announcing. A picture needs a short text description — its alternative text — so people who can't see it know what it shows.
Without one, people hear "image" or "graphic" and nothing else. If the SVG is a logo, chart or icon button, they miss the meaning, or can't tell what a control does.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "image" or "graphic" with no description, or a messy file name. | High impact |
| Low-vision users (magnification) | Affected if they use a screen reader to check small or unclear icons. | Partial impact |
| Cognitive and neurodivergent users | Some use text-to-speech tools, which skip or garble the unnamed image. | Partial impact |
| Voice control users | If the SVG is a control, they have no name to say aloud to click it. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | Text alternatives are a WCAG 1.1.1 Level A requirement, the minimum. Complaints under Australia's Disability Discrimination Act and EN 301 549 both point to WCAG. | High impact |
| Conversion | Unnamed icons on cart, search or menu buttons can stop a purchase outright. | Moderate impact |
| SEO | Search engines mostly ignore inline SVG names. Expect little benefit. | Low impact |
| Brand trust | An unnamed logo means screen reader users don't even hear your brand name. | Moderate impact |
| Cost to fix | Usually a one-line fix. Fix it once in the shared icon component. | High impact |
Fixing it in code
A company logo
Don't
<svg role="img" viewBox="0 0 100 40">…</svg>A screen reader says: “image”
Do
<svg role="img" aria-label="Acme Bank" viewBox="0 0 100 40">…</svg>A screen reader says: “Acme Bank, image”
aria-label gives the image a name that screen readers read out.
A chart with a title
Don't
<svg role="img">
<path d="…"/>
</svg>A screen reader says: “image”
Do
<svg role="img" aria-labelledby="chart-title">
<title id="chart-title">Sales rose 20% in 2024</title>
<path d="…"/>
</svg>A screen reader says: “Sales rose 20% in 2024, image”
A <title> inside the SVG, linked with aria-labelledby, names it reliably.
A decorative icon next to text
Don't
<button><svg role="img">…</svg> Search</button>A screen reader says: “image, Search, button”
Do
<button><svg aria-hidden="true" focusable="false">…</svg> Search</button>A screen reader says: “Search, button”
If the text already says it, hide the icon instead of naming it.
Designer's handoff note
For every icon, logo and chart, note in the handoff whether it's decorative or meaningful.
For meaningful ones, write the alternative text — what it means, not what it looks like. For example, "Search", not "Magnifying glass".
Quick test
Tool
NVDA (opens in a new tab) (free on Windows)
Checklist
- Pass
- Each meaningful image has a clear name, like "Acme Bank, graphic".
- Fail
- You hear just "graphic", or a meaningless name like "icon-23".
Check these at the same time
- A button has no name a screen reader can say
button-name - An image has no text alternative
image-alt
What a green scan still misses
A scanner checks that a name exists. It can't tell if the name is accurate, or whether the SVG should be hidden as decoration instead.
Reference
- Rule ID
svg-img-alt- Raised by
- axe-core: “<svg> elements with an img or image role 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.5
- Last reviewed
- 14 October 2026