• 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

Related scenarios