WCAG 2.1 · Level AA · Perceivable

WCAG 1.4.13 — Content on Hover or Focus, explained with examples

Tooltip and hover content must be dismissible (Esc), hoverable (mouse can move into it), and persistent (stays until dismissed). Tooltips that disappear when you try to read them are useless to low-vision and cognitive accessibility users.

Number
1.4.13
Level
AA
Principle
Perceivable
Guideline
1.4 Distinguishable

Why this criterion exists

Tooltips that disappear when you try to read them are useless to low-vision and cognitive accessibility users.

If you only remember one thing: tooltip and hover content must be dismissible (esc), hoverable (mouse can move into it), and persistent (stays until dismissed). Everything else on this page is detail.

Who feels it when this fails

Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Content on Hover or Focus affects:

  • Low-vision users zooming in

  • Cognitive accessibility

How sites typically fail it

These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.

  • Tooltip closes the moment the cursor leaves the trigger

How to test for it

  • Open a tooltip; move into the tooltip; press Esc — all three should work.

Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.

A code fix you can copy

Allow Esc dismissal, hoverable region, persistent until dismissal.

The problem

HTML
<div class="tooltip" data-show-on="hover-only">...</div>

The fix

HTML
<div role="tooltip" id="tip" data-dismissible-with="esc">...</div>
<button aria-describedby="tip">Help</button>

Allow Esc dismissal, hoverable region, persistent until dismissal.

Frequently asked questions

What are the three requirements for hover/focus content under 1.4.13?

Dismissible: the user can dismiss the additional content without moving focus or hover — Esc must close a tooltip. Hoverable: the pointer can move from the trigger into the tooltip without it closing — users need to be able to read and possibly interact with the tooltip. Persistent: the tooltip stays visible until the user dismisses it, moves hover away, or focus leaves — it must not auto-close on a timer.

Do title attribute tooltips satisfy 1.4.13?

No. The browser title tooltip disappears when you move the mouse — it is not hoverable, not keyboard accessible, and not Esc-dismissible. It also does not appear on touch devices. The title attribute is essentially inaccessible for tooltip purposes. Use a custom ARIA tooltip (role="tooltip", aria-describedby) or a CSS/JS solution that implements all three 1.4.13 requirements.

Other Perceivable criteria

Find every accessibility issue on your site in 60 seconds.

Free public scan. No card. AI-generated fixes for every issue we find.