Powered by
Keyboard & focus
A Focusable Element Has No Role Saying What It Is
Keyboard focus lands on something that doesn't say what it is, so screen reader users can't tell whether to click it, type in it or skip it.
focus-order-semanticsBest practiceBest practice — not a WCAG requirement, but it helps people all the same.
- Status
- ModerateModerate — An annoyance, with a workaround.Experimentalaxe-core has this rule, but runs it only when a team turns experimental rules on.
- Owner
- DesignDevTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Experimental rule. Experimental in axe-core: it runs only when a team turns experimental rules on, so a clean default scan says nothing about it. It is a best practice rather than a WCAG failure, but a focusable element with no role still confuses screen reader users.
Why it matters
Adding tabindex="0" puts any element in the Tab order. That doesn't tell assistive technology what the element is. A role is the label that says "button", "link" or "tab".
Without a role, a screen reader reads only the text. People don't know it's a control, or what pressing it will do. Stray focus stops on plain text also slow down keyboard users.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "Save" with no "button", so they don't know it can be pressed. | High impact |
| Low-vision users (magnification) | Affected only if they also use a screen reader; the screen looks the same. | Partial impact |
| Keyboard-only users | They stop on things that do nothing, or find Enter and Space don't work as expected. | Partial impact |
| Cognitive and neurodivergent users | Focus landing on plain text is confusing when nothing happens. | Partial impact |
| Voice control users | Saying "click button" may not find it, because it isn't known as a button. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | This is a best practice, not a WCAG requirement on its own. But a custom control with no role often breaks WCAG 2.2 Level AA rules, which complaints under Australia's Disability Discrimination Act point to. | Moderate impact |
| Conversion | If a checkout or filter control isn't announced as a control, some people can't finish the task. | Moderate impact |
| SEO | No real search benefit — don't sell it as one. | Low impact |
| Brand trust | Controls that don't say what they are feel broken to screen reader users. | Low impact |
| Cost to fix | Using a real `<button>` or `<a>` is usually quick, and fixes keyboard behaviour for free. | High impact |
Fixing it in code
A clickable div used as a button
Don't
<div tabindex="0" onclick="save()">Save</div>A screen reader says: “Save”
Do
<button type="button" onclick="save()">Save</button>A screen reader says: “Save, button”
A real button has the role, focus and Enter and Space keys built in.
Plain text added to the Tab order
Don't
<p tabindex="0">Delivery takes 3 to 5 days.</p>A screen reader says: “Delivery takes 3 to 5 days.”
Do
<p>Delivery takes 3 to 5 days.</p>A screen reader says: “Delivery takes 3 to 5 days.”
Text that does nothing shouldn't take focus; screen readers read it anyway.
Designer's handoff note
In the spec, mark each interactive element with its type — button, link, tab, checkbox.
Only things people can act on should receive keyboard focus.
Quick test
Tool
NVDA (opens in a new tab) (free, Windows) or VoiceOver (opens in a new tab) (Mac)
Duration
2 minChecklist
- Pass
- Every focus stop is a control and announces its role.
- Fail
- Focus stops on something that announces only its text, or nothing.
Check these at the same time
- An element has an ARIA role that doesn't suit it
aria-allowed-role - A control sits inside another control
nested-interactive - A scrolling area can't be reached with the keyboard
scrollable-region-focusable - An element has a tabindex greater than zero
tabindex
What a green scan still misses
This rule is experimental and may miss cases or flag false ones. A scanner can't judge whether the role chosen matches what the element does — check by using it.
Reference
- Status
- ExperimentalExperimental in axe-core: it runs only when a team turns experimental rules on, so a clean default scan says nothing about it. It is a best practice rather than a WCAG failure, but a focusable element with no role still confuses screen reader users.
- Rule ID
focus-order-semantics- Raised by
- axe-core: “Elements in the focus order should have an appropriate role”
- WCAG
- Best practice — not a WCAG requirement
- Other standards
- RGAA 12.8.1
- Last reviewed
- 16 October 2026