- Success Criterion 1.4.13
- Conformance level AA
Hover Preview Card That Vanishes on the Slightest Pointer Move
1.4.13 — Content on Hover or Focus
Scenario
Setting
A car-rental site's checkout flow
What’s wrong
Hover cards (user previews) that vanish on tiny pointer jitter or timeout while being read.
Example
<span title="More info about this field"></span> Why it matters
Screen-magnifier users, people with motor tremors, and keyboard-only users of tooltips/menus.
How to test
Hover to trigger a user-preview/hover card and try to read it: if it disappears on tiny pointer jitter or times out before you finish reading, it fails.
How to fix
Hover/focus-triggered content must stay visible until dismissed, be dismissible with Esc without moving pointer/focus, and remain when the pointer moves onto it.
<button aria-describedby="tip-1">ⓘ</button><div id="tip-1" role="tooltip">More info about this field</div>A hover-triggered tooltip must be dismissible, stay put while the pointer moves onto it, and stay visible until dismissed.
Outcome
On a car-rental site's checkout flow, this barrier is gone for screen-magnifier users, people with motor tremors — they can complete the task without hitting this wall.
Who is affected
Screen-magnifier users, people with motor tremors, and keyboard-only users of tooltips/menus.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Hover Tooltip That Vanishes Before the Pointer Can Reach It
- Hover Content That Can’t Be Dismissed Without Moving the Mouse
- Tooltip That Can’t Be Closed With the Escape Key
- Mega-Menu That Collapses When Crossing the Gap to Reach It
- Focus-Triggered Popover That Steals or Dumps Keyboard Focus
- Tooltip That Covers the Very Field It’s Meant to Explain