- 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
.addon-icon:hover .addon-preview { display: block; }
.addon-preview { display: none; } /* even a 1px jitter off the icon hides the preview instantly */ Why it matters
A renter trying to read details about the collision-insurance add-on loses the preview card the instant their hand trembles slightly on the trackpad.
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
Add a small tolerance area and let hovering the preview itself keep it open, so minor pointer jitter doesn't close it.
.addon-icon:hover .addon-preview,
.addon-icon:focus-within .addon-preview,
.addon-preview:hover { display: block; } Outcome
A renter reads the full collision-insurance details even with a slightly unsteady hand on the trackpad.
Who is affected
Users with hand tremors or limited fine motor control can't hold the pointer steady enough to keep the preview open.
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