Powered by
Names, roles & states
A Tab Has No Name for Screen Readers
When a tab has no name, screen reader users hear only "tab" and can't tell which section it opens.
aria-tab-nameWCAG 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
Tabs let people switch between sections, like "Details", "Reviews" and "Delivery". A screen reader reads each tab's name so people know where it leads.
Tabs often show only an icon, or have text hidden from screen readers. Then the tab has no name. People hear "tab, 2 of 4" and must guess.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "tab, 2 of 4" with no name, so they open each tab to find the right one. | High impact |
| Voice control users | They can't say "click Reviews" because the tab has no name to match. | High impact |
| Low-vision users (magnification) | Affected if they use a screen reader, or if icon-only tabs are hard to make out. | Partial impact |
| Cognitive and neurodivergent users | Icon-only tabs with no words can be hard to understand and remember. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | Naming controls is a WCAG 2.2 Level A requirement, the minimum. Complaints under Australia's Disability Discrimination Act and EN 301 549 point to it. | High impact |
| Conversion | Unnamed tabs on product pages hide reviews, sizes or delivery details. People who can't find them may leave. | Moderate impact |
| SEO | Little or no search benefit — don't sell it as one. | Low impact |
| Brand trust | Unlabelled controls feel careless to people who rely on screen readers. | Moderate impact |
| Cost to fix | Usually a small fix in the shared tabs component, which fixes every page at once. | High impact |
Fixing it in code
An icon-only tab
Don't
<button role="tab" aria-selected="true"><svg aria-hidden="true">…</svg></button>A screen reader says: “Tab, selected, 1 of 3”
Do
<button role="tab" aria-selected="true" aria-label="Reviews"><svg aria-hidden="true">…</svg></button>A screen reader says: “Reviews, tab, selected, 1 of 3”
aria-label gives the tab a name when there is no visible text.
A tab with visible text
Don't
<div role="tab" aria-selected="false"><span aria-hidden="true">Delivery</span></div>A screen reader says: “Tab, 2 of 3”
Do
<div role="tab" aria-selected="false" tabindex="-1">Delivery</div>A screen reader says: “Delivery, tab, 2 of 3”
Text inside the tab becomes its name, unless it's hidden with aria-hidden.
Fixing it in design and content
Add words to tabs
Don't
Tabs show only icons, like a star, a truck and a box.
Do
Each tab shows a short word next to its icon, like "Reviews", "Delivery" and "Returns".
Visible words name the tab for everyone, not just screen reader users.
Designer's handoff note
Give every tab a short visible label. If space forces icons only, write the name each tab should have in your design notes.
Quick test
Tool
NVDA (opens in a new tab) (free, Windows) or VoiceOver (opens in a new tab) (Mac)
Checklist
- Pass
- Each tab says a clear name, like "Reviews, tab, 2 of 3".
- Fail
- You hear only "tab" and a number, with no name.
Check these at the same time
- A custom button, link or menu item has no name
aria-command-name - A button has no name a screen reader can say
button-name
What a green scan still misses
A scanner finds tabs with no name at all. It can't tell whether a name like "Tab 1" or a wrong label actually makes sense — listen to check.
Reference
- Rule ID
aria-tab-name- Raised by
- axe-core: “ARIA tab nodes must 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 7.1.1
- Last reviewed
- 14 October 2026