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

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.

A code fix you can copy

Allow Esc dismissal, hoverable region, persistent until dismissal.

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

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

Other Perceivable criteria