- Success Criterion 2.1.1
- Conformance level A
Hover-Only Controls Never Shown to Keyboard Users
2.1.1 — Keyboard
Scenario
Setting
A language-learning app's lesson screen
What’s wrong
Controls revealed only on mouse hover (zoom buttons, quick-action overlays on product cards) are never shown on keyboard focus — keyboard users don't even know the feature exists.
Example
During an audit of a language-learning app's lesson screen: controls revealed only on mouse hover (zoom buttons, quick-action overlays on product cards) are never shown on keyboard focus — keyboard users don't even know the feature exists.
Why it matters
Blind users, people with motor disabilities, and anyone operating the interface without a pointer. On a language-learning app's lesson screen, that means they can't complete the task using a keyboard alone.
How to test
Tab to a product card or similar element: if extra controls (zoom, quick actions) only appear on mouse hover with no keyboard-focus equivalent, keyboard users never know they exist.
How to fix
Reveal hover-only controls on keyboard focus too (:focus-within), or show them permanently.
Outcome
With the fix in place on a language-learning app's lesson screen, 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
- Custom Dropdown That Can’t Be Operated by Keyboard Arrows