Powered by
Names, roles & states
A Button Has No Name a Screen Reader Can Say
A screen reader announces just "button", so people can't tell what it does — close, search, delete or buy.
button-nameWCAG 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
Many buttons show only an icon — a cross, a magnifying glass, a bin. Sighted people read the picture. A screen reader needs words in the code, and there are none.
Without a name, people must guess or skip the button. Voice control users can't say its name to press it either.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear only "button" and must guess what pressing it will do. | High impact |
| Voice control users | They can't say "click Search" because the button has no name to call. | High impact |
| Low-vision users (magnification) | Affected if they use a screen reader, or if the icon is too small to recognise. | Partial impact |
| Cognitive and neurodivergent users | An icon with no words can be hard to understand, though that is a design issue as much as code. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | It fails WCAG 4.1.2 at Level A, the minimum. Australian complaints under the Disability Discrimination Act measure against WCAG 2.2 AA, and EN 301 549 applies in Europe. | High impact |
| Conversion | An unnamed "Add to cart", "Search" or "Next" button can stop a sale or sign-up completely. | High impact |
| SEO | Search engines don't reward button names in any real way. | Low impact |
| Brand trust | A site full of buttons that just say "button" feels broken to screen reader users. | Moderate impact |
| Cost to fix | Usually a one-line fix. Fix the shared icon button component and every copy is fixed. | High impact |
Fixing it in code
An icon-only close button
Don't
<button><svg aria-hidden="true">…</svg></button>A screen reader says: “button”
Do
<button aria-label="Close"><svg aria-hidden="true">…</svg></button>A screen reader says: “Close, button”
aria-label gives the button a name when it has no visible text.
A search button using an image
Don't
<button type="submit"><img src="search.svg" alt=""></button>A screen reader says: “button”
Do
<button type="submit"><img src="search.svg" alt="Search"></button>A screen reader says: “Search, button”
The image's alt text becomes the button's name.
Fixing it in design and content
Write names that say the action
Don't
aria-label="Icon" or aria-label="Button 3"A screen reader says: “Icon, button”
Do
aria-label="Delete address"A screen reader says: “Delete address, button”
A name that says the action tells people what will happen.
Designer's handoff note
For every icon-only button, write its name in the design file — for example, "Close" or "Open menu".
Where you can, show a visible text label next to the icon. It helps everyone.
Quick test
Tool
NVDA (opens in a new tab) (free, Windows) or VoiceOver (opens in a new tab) (Mac)
Checklist
- Pass
- Every button says what it does, like "Close, button".
- Fail
- Any button says only "button", or a meaningless name like "icon".
What a green scan still misses
A scanner finds buttons with no name. It can't tell if a name like "Click" or "X" actually makes sense — for that, listen.
Reference
- Rule ID
button-name- Raised by
- axe-core: “Buttons must have discernible text”
- Lighthouse: “Buttons have an accessible name”
- WCAG
- 4.1.2 Name, Role, Value (opens in a new tab) · Level A · since WCAG 2.0
- Other standards
- EN 301 549 9.4.1.2 · RGAA 11.9.1
- Last reviewed
- 14 October 2026