- Success Criterion 2.1.1
- Conformance level A
Clickable Div With No Keyboard Focus or Key Handling at All
2.1.1 — Keyboard
Scenario
Setting
A telehealth app's video-visit waiting room
What’s wrong
Clickable div/span/icon with click handler, no tabindex="0" (code making it keyboard-focusable), no key handling.
Example
On a telehealth app's video-visit waiting room: clickable div/span/icon with click handler, no tabindex="0" (code making it keyboard-focusable), no key handling.
Why it matters
Blind users, people with motor disabilities, and anyone operating the interface without a pointer. The practical effect on a telehealth app's video-visit waiting room: they can't complete the task using a keyboard alone.
How to test
Tab to a clickable div/span: if it has no tabindex="0" and no keydown handler, keyboard focus skips over it entirely.
How to fix
Use a native button/link, or add tabindex="0" (code making it keyboard-focusable) plus Enter/Space key handling.
Outcome
That one change on a telehealth app's video-visit waiting room means they reach and operate the control without a mouse.
Who is affected
Blind users, people with motor disabilities, and anyone operating the interface without a pointer.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Feature That Only Responds to Mouse Events, Not the Keyboard
- Element That Loses Focus the Instant It’s Reached by Keyboard
- Clickable Element Acting Like a Link With No Real Keyboard Role
- Focusable Element That Enter and Space Don’t Actually Activate
- Custom Dropdown That Can’t Be Operated by Keyboard Arrows
- Drag-and-Drop Feature With No Keyboard Alternative