• Success Criterion 1.4.13
  • Conformance level AA

Focus Tooltip With No Way to Dismiss It by Keyboard

1.4.13 — Content on Hover or Focus

Scenario

Setting

A job board's application form

What’s wrong

Custom title-replacement tooltips triggered on focus but with no keyboard dismissal path.

Example 

.cover-letter:focus + .char-limit-tip { display: block; }
<!-- the tooltip only closes when the textarea loses focus; there's no Escape handler and no close button -->

Why it matters

An applicant who focuses the cover-letter field and reads the character-limit tip has to tab away from the field entirely just to make the tip disappear.

How to test

Tab to a control with a custom title-replacement tooltip: if there's no keyboard way to dismiss it (Esc doesn't work), it fails.

How to fix

Give focus-triggered tips a keyboard dismissal path that doesn't force the user out of the field they're using.

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') { charLimitTip.style.display = 'none'; }
});

Outcome

An applicant presses Escape to close the character-limit tip and keeps typing in the same field.

Who is affected

Keyboard users can't dismiss the tip without abandoning the field they were about to type in.

Learn more

Related scenarios