• Success Criterion 1.4.13
  • Conformance level AA

Hover Content That Can’t Be Dismissed Without Moving the Mouse

1.4.13 — Content on Hover or Focus

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Documented but unnumbered by W3C: hover/focus content that cannot be dismissed (e.g., with Esc) without moving the pointer or focus, or that disappears on its own before the user dismisses it.

Example 

.fee-info:hover .fee-tooltip { display: block; }
<!-- no Escape handler exists, and the tooltip only closes when the mouse physically leaves the fee icon -->

Why it matters

A customer who opens the transfer-fee tooltip and wants to dismiss it without accidentally hovering onto another field has no way to close it except moving the mouse away.

How to test

Trigger the hover/focus content and check: it must be dismissible without moving the pointer or focus (e.g., via Esc), and stay visible until dismissed or no longer valid — either missing condition fails.

How to fix

Give every hover or focus popup an Escape key handler as a dismissal method that doesn't depend on pointer movement.

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') { closeFeeTooltip(); }
});

Outcome

A customer presses Escape and the fee tooltip closes immediately, without needing to move the mouse anywhere.

Who is affected

Users who navigate primarily by keyboard, or who use switch access, get stuck with no dismissal method at all.

Learn more

Related scenarios