• Success Criterion 2.2.2
  • Conformance level A

Pause Button That Only Works While Hovering, Not as a Toggle

2.2.2 — Pause, Stop, Hide

Scenario

Setting

A budget airline's flight search results

What’s wrong

"Pause" control that only pauses on hover then resumes (not a persistent mechanism).

Example 

slider.addEventListener("mouseenter", pause);
slider.addEventListener("mouseleave", resume);
// the visible pause icon has no onclick handler

Why it matters

A keyboard-only traveler comparing flight deals has no way to pause the carousel since it only responds to a mouse hovering.

How to test

Locate the pause control: if it only pauses while hovering and resumes the moment the pointer leaves (not a persistent toggle), it fails.

How to fix

A click-based toggle keeps working for keyboard and touch users, not just a mouse hover.

<button id="pauseBtn" onclick="togglePause()">Pause results</button>
<!-- togglePause() sets a persistent paused flag, independent of mouseenter/mouseleave -->

Outcome

A traveler pauses the flight deal carousel and compares options without it moving underneath them.

Who is affected

Keyboard users and touchscreen users get no functioning pause because the mechanism depends on a hover event.

Learn more

Related scenarios