- Success Criterion 2.1.1
- Conformance level A
Tooltip Trigger That Can’t Be Reached by Keyboard Focus
2.1.1 — Keyboard
Scenario
Setting
A video-conferencing app's meeting controls
What’s wrong
Information available only via mouse-hover tooltip whose trigger is not focusable — no keyboard path to the content at all.
Example
Picture a video-conferencing app's meeting controls: information available only via mouse-hover tooltip whose trigger is not focusable — no keyboard path to the content at all.
Why it matters
Blind users, people with motor disabilities, and anyone operating the interface without a pointer. In this case (a video-conferencing app's meeting controls), they get stuck and can't reach the control.
How to test
Tab to a tooltip's trigger element: if it's not focusable (only mouse-hoverable), keyboard users never see the tooltip content.
How to fix
Make the tooltip trigger focusable and show the content on focus as well as hover.
Outcome
Once corrected, a video-conferencing app's meeting controls lets them 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