Serious2.4.3 Focus Order (Level A), 4.1.2 Name, Role, Value (Level A)Rule ID: focus-order-semantics
Elements in the focus order must have appropriate semantics
Focusable elements appear in the keyboard order but are not interactive or do not expose proper semantic role.
Rule Description
Checks focusable elements for valid role, accessible name, and expected keyboard interaction semantics.
Why It Matters
- Keyboard users tab to elements that do nothing
- Screen reader users hear unclear roles/expectations
- Navigation flow becomes inefficient and confusing
How to Fix
Only make genuinely interactive elements focusable; use semantic HTML controls where possible.
Bad Example:
<div tabindex="0" onclick="openModal()">Open</div>
Good Example:
<button type="button" onclick="openModal()">Open</button>
Common Mistakes
- Focusable
<div>/span>without role or keyboard handlers tabindex="0"on decorative elements- Mismatch between element role and behavior
Testing
- Navigate entire UI using only keyboard
- Verify each focused element has purpose and action
- Check accessibility tree for role/name/value consistency
External Resources
Automate Your Accessibility Testing
Our tool automatically checks for this rule and hundreds of other accessibility issues.
Start Your Free Trial