- Success Criterion 2.1.1
- Conformance level A
Scrollable Content Area That Can’t Be Reached by Keyboard
2.1.1 — Keyboard
Scenario
Setting
A video streaming service's show detail page
What’s wrong
Scrollable overflow container not keyboard-focusable (tabindex (keyboard-focus setting) missing), leaving overflow content unreachable without a mouse.
Example
On a video streaming service's show detail page: scrollable overflow container not keyboard-focusable (tabindex (keyboard-focus setting) missing), leaving overflow content unreachable without a mouse.
Why it matters
Blind users, people with motor disabilities, and anyone operating the interface without a pointer. On a video streaming service's show detail page specifically, they can't complete the task using a keyboard alone.
How to test
Tab to a scrollable region (e.g., a code block or overflow panel): if it has no tabindex="0" and arrow keys/Page Down don't scroll it, keyboard users can't reach its content.
How to fix
Add tabindex="0" (code making it keyboard-focusable) (and a role/name) to scrollable containers so keyboard users can scroll them.
Outcome
Fixed, a visitor to a video streaming service's show detail page can complete the task using only the keyboard.
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
- Clickable Div With No Keyboard Focus or Key Handling at All
- Focusable Element That Enter and Space Don’t Actually Activate
- Custom Dropdown That Can’t Be Operated by Keyboard Arrows