What This Rule Checks
Elements that receive keyboard focus should have roles that convey interactivity. When non-interactive elements like paragraphs or divs appear in the tab order, keyboard users may become confused about what actions are available.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices; Cognitive users, who benefit from clear structure, simple language, and consistent navigation patterns.
Why This Matters
Non-interactive elements in the tab order confuse keyboard users who expect every focusable element to have an action. Users waste keystrokes tabbing through inert elements and may think the interface is broken.
How to Fix
Remove tabindex from non-interactive elements, or assign an appropriate interactive role (button, link, etc.) if the element is meant to be interactive. Use native interactive elements where possible.
Code Examples
<!-- Non-interactive element in focus order -->
<p tabindex="0">
This paragraph receives focus but has no interactive purpose.
</p>
Copy
<!-- Only interactive elements in focus order -->
<p>
This paragraph is not focusable.
</p>
<button>Take action</button>
<!-- If the element needs to be focusable, give it an interactive role -->
<div role="button" tabindex="0">
Custom action
</div>
Copy
Common Mistakes to Avoid
- Adding tabindex=”0″ to paragraphs, divs, or spans without interactive purpose.
- Making decorative elements focusable for visual effects.
- Not removing tabindex from elements after they are no longer interactive.
Tip: Keyboard navigation is essential for users who cannot use a mouse. Ensure all interactive elements are reachable via the Tab key and operable via Enter or Space. Test focus visibility and focus order on every page.
Related WCAG Criteria
- 2.4.3: Focus Order