• Success Criterion 1.4.13
  • Conformance level AA

Tooltip That Can’t Be Closed With the Escape Key

1.4.13 — Content on Hover or Focus

Scenario

Setting

A government tax-filing portal

What’s wrong

Tooltips that cannot be dismissed with Esc while obscuring other content.

Example 

.help-icon:focus + .help-tooltip { display: block; position: absolute; z-index: 10; }
<!-- the tooltip covers the field below it and only closes on blur, with no keydown listener for Escape -->

Why it matters

A filer who tabs to a help icon and opens its tooltip has no way to dismiss it except tabbing further away, even though it visually covers the next field.

How to test

Trigger a tooltip and press Esc while it obscures other content: if it doesn't close, or closing it also moves focus away unexpectedly, it fails.

How to fix

Add an Escape handler that closes the tooltip and returns focus to its trigger, independent of the tab order.

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') { document.querySelector('.help-tooltip').removeAttribute('data-open'); }
});

Outcome

A filer presses Escape and the help tooltip closes, revealing the field it was covering right away.

Who is affected

Keyboard users can get stuck unable to see or reach the field the tooltip is covering until they navigate elsewhere.

Learn more

Related scenarios