Images & icons
An Image Button Has No Text Alternative
A button made from an image has no words behind it, so screen reader users hear only "button" or a file name and can't tell what it does.
input-image-altWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.
- Status
- CriticalCritical — Someone can complete the task only with great difficulty or outside help.CurrentScanners run this rule today.
- Owner
- DesignDevContentTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
An image button is an <input type="image">. It works like a submit button, but shows a picture, such as an arrow or a magnifying glass. The alt attribute gives it words that screen readers can say.
Without alt, the button has no name. People may hear "button" or a meaningless file name like "btn_go_02.png". They have to guess, or give up on the search, sign-up or checkout.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "button" or a file name, with no clue what pressing it will do. | High impact |
| Voice control users | They can't say the button's name to press it, so they must use slower workarounds. | High impact |
| Low-vision users (magnification) | If the image doesn't load or is hard to see, there's no text to fall back on. | Partial impact |
| Cognitive and neurodivergent users | An icon with no words can be hard to understand, though `alt` alone won't show on screen. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | It falls under WCAG 1.1.1 and 4.1.2 at Level A, the minimum. Complaints under Australia's Disability Discrimination Act point to WCAG, and EN 301 549 applies in Europe. | High impact |
| Conversion | Image buttons often submit searches, sign-ups and orders. If people can't find the button, they can't finish. | High impact |
| SEO | Little to no search benefit — don't sell it as one. | Low impact |
| Brand trust | A checkout that can't be used by screen reader users gets noticed and shared. | Moderate impact |
| Cost to fix | Usually a one-word fix. Fix it once in the shared form component. | High impact |
Fixing it in code
A search button shown as a magnifying glass
Don't
<input type="image" src="icons/search-mag.png">A screen reader says: “search-mag.png, button”
Do
<input type="image" src="icons/search-mag.png" alt="Search">A screen reader says: “Search, button”
The alt text becomes the button's name, so people hear what it does.
Fixing it in design and content
Describe the action, not the picture
Don't
<input type="image" src="arrow-right.png" alt="Green arrow pointing right">A screen reader says: “Green arrow pointing right, button”
Do
<input type="image" src="arrow-right.png" alt="Continue to payment">A screen reader says: “Continue to payment, button”
People need to know what happens when they press it, not what it looks like.
Designer's handoff note
For every icon-only button, write the words it should say aloud, like "Search" or "Continue to payment".
Consider showing a visible text label too. Many people find icons alone hard to understand.
Quick test
Tool
VoiceOver (opens in a new tab) (on every Mac)
Checklist
- Pass
- You hear a clear action, like "Search, button".
- Fail
- You hear only "button", a file name, or a description of the picture.
Check these at the same time
- A clickable area of an image map has no text
area-alt - 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 alt text exists. It can't tell whether the words make sense, such as "image" or "arrow" — for that, listen.
Reference
- Rule ID
input-image-alt- Raised by
- axe-core: “Image buttons must have alternative text”
- WCAG
- 1.1.1 Non-text Content (opens in a new tab) · Level A · since WCAG 2.0
- 4.1.2 Name, Role, Value (opens in a new tab) · Level A · since WCAG 2.0
- Other standards
- EN 301 549 9.1.1.1 · EN 301 549 9.4.1.2 · RGAA 1.1.3
- Last reviewed
- 14 October 2026