• 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 

.flashcard-image:hover .zoom-icon { opacity: 1; }
.zoom-icon { opacity: 0; }
<!-- the icon is only ever visible on mouse hover; nothing changes on keyboard focus -->

Why it matters

A learner tabbing through flashcards never sees the zoom icon appear, so they don't know a larger view of the image is even available.

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

Any control revealed on hover must also reveal on focus, using :focus-within or a matching JS focus/blur listener, so keyboard users can find it.

.flashcard-image:hover .zoom-icon,
.flashcard-image:focus-within .zoom-icon { opacity: 1; }

Outcome

A learner tabs onto a flashcard, sees the zoom icon appear, and opens the larger image.

Who is affected

Keyboard-only users and low-vision keyboard users never discover controls that reveal themselves only to a mouse pointer.

Learn more

Related scenarios