• 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 

.seat:hover .seat-preview { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); }
<!-- the fixed, full-screen overlay blocks clicks on every other seat until the mouse leaves this one -->

Why it matters

A buyer comparing two seats can't click a neighboring seat while the first seat's preview overlay is open, since it covers the entire screen until the pointer moves away.

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

Never let hover content block interaction with the rest of the page; size it to its content and give it its own dismissal.

.seat-preview { position: absolute; width: 240px; }
<!-- size the preview to its content and let it close on Escape or a close button, not only by leaving the seat -->

Outcome

A buyer compares two nearby seats side by side without a full-screen overlay locking out the rest of the map.

Who is affected

Users with limited dexterity who need extra time positioning the pointer get trapped unable to interact with the page underneath.

Learn more

Related scenarios