- Success Criterion 2.1.1
- Conformance level A
Custom Dropdown That Can’t Be Operated by Keyboard Arrows
2.1.1 — Keyboard
Scenario
Setting
A streaming music app's search results
What’s wrong
Custom dropdowns/comboboxes not operable via arrows/Enter/Esc.
Example
A tester reviewing a streaming music app's search results finds this: custom dropdowns/comboboxes not operable via arrows/Enter/Esc.
Why it matters
Blind users, people with motor disabilities, and anyone operating the interface without a pointer. On a streaming music app's search results, that means they can't operate the feature without a mouse.
How to test
Tab to a custom dropdown and try arrow keys, Enter, and Esc: if none of the standard combobox keys open/navigate/select/close it, it fails.
How to fix
Implement the standard combobox keyboard pattern: arrows to move, Enter to select, Esc to close.
Outcome
With the fix in place on a streaming music app's search results, they keep track of where they are on the page.
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
- Drag-and-Drop Feature With No Keyboard Alternative