- Success Criterion 2.1.1
- Conformance level A
- W3C reference F54
Feature That Only Responds to Mouse Events, Not the Keyboard
2.1.1 — Keyboard
Scenario
Setting
A bank's mobile money-transfer screen
What’s wrong
A feature only responds to mouse-specific events (mousedown, hover, gestures) — keyboard users cannot trigger it at all.
Example
const confirmBtn = document.querySelector('.confirm-slider');
confirmBtn.addEventListener('mousedown', startDrag);
confirmBtn.addEventListener('touchstart', startDrag);
// no keydown or click handler, so there is no keyboard path to submit the transfer Why it matters
A customer using only a keyboard can fill in the amount and recipient but can never submit the transfer, so the money never moves.
How to test
Unplug the mouse and Tab to the feature: if it only responds to mousedown/touchstart/gesture events with no keydown/keyup handler, nothing happens and it fails.
How to fix
Any control that only fires on mousedown or touchstart needs an equivalent keydown handler for Enter and Space, per technique F54.
confirmBtn.setAttribute('tabindex', '0');
confirmBtn.setAttribute('role', 'button');
confirmBtn.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
submitTransfer();
}
}); Outcome
A customer using only a keyboard completes the transfer without ever touching a mouse.
Who is affected
Keyboard-only users and switch-access users relying on a scanning switch instead of a pointer are blocked completely.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- 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
- Drag-and-Drop Feature With No Keyboard Alternative