• Success Criterion 1.4.13
  • Conformance level AA

Hover Preview That Blocks the Page Until the Pointer Leaves

1.4.13 — Content on Hover or Focus

Scenario

Setting

A ticket marketplace's seat-selection map

What’s wrong

Hover previews that trap scrolling or block clicks on underlying content until pointer leaves, but content also can't be dismissed.

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 preview: if it traps scrolling or blocks clicks on the underlying content until the pointer physically leaves, and can't otherwise be dismissed, 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 ticket marketplace's seat-selection map, 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