WCAG 1.4.13 sets three conditions for any extra content that appears when you hover over or focus on something, such as a tooltip or a fly out menu: you can dismiss it without moving the pointer or focus (usually with Escape), you can move the pointer onto it without it vanishing, and it stays visible until you leave, dismiss it, or it stops being relevant. Level AA, since WCAG 2.1 brought it in.
The short names are dismissible, hoverable and persistent.
Quick facts
Level
AAAdded in
WCAG 2.1Three conditions
Dismissible, hoverable, persistentUsual dismiss key
Escape, without moving focus or the pointerOut of scope
Content opened by a click, and the browser's own title tooltipsHelps
Screen magnifier users, low vision users, people with tremors
The three conditions of WCAG 1.4.13
| Condition | What the user can do | Typical failure |
|---|---|---|
| Dismissible | Close the extra content without moving the pointer or keyboard focus, usually with Escape | A tooltip covers the text you are reading and the only way to hide it is to move away |
| Hoverable | Move the pointer from the trigger onto the popup, and it stays open | The tooltip vanishes the moment the pointer leaves the icon, so a magnified view can never reach it |
| Persistent | Keep it on screen until they move away, dismiss it, or its information is no longer valid | A popup fades out after three seconds |
There is one softening of the first condition. If the popup reports an input error, or does not hide or replace any other content, it does not need its own way to be dismissed.
What content is in scope
The rule applies to content that appears because of pointer hover or keyboard focus and then disappears again. Examples:
- Custom tooltips on icons and help buttons
- Sub menus that open when you hover a top menu item
- Preview cards that appear over a user name or link
- Help text that pops up when a form field receives focus
Two things fall outside it. Content opened by a click or tap is not covered, because the user asked for it and can close it the same way. Tooltips drawn by the browser itself from the title attribute are also outside, since the author does not control them, although they are poor for accessibility for other reasons.
Changing a hover tooltip into a toggletip, a small button that opens the help on click, often fixes the problem and works better on touch screens, where hover does not exist.
Why it matters
People who use screen magnification view just a slice of the screen in any one moment. When they hover an icon, the tooltip often appears just outside their view. To read it they must move the pointer, and if the tooltip closes as soon as the pointer leaves the icon, they can never read it. People with low vision who zoom the browser face the same issue. A popup that covers the text they are reading, with no way to close it but moving away, blocks them too. People with tremors or limited fine motor control often drift off a small trigger by accident and lose the content. And slow readers lose popups that close on a timer before they finish.
Test it with mouse and keyboard
- Make a list of everything that appears on hover or focus. Hover over icons, menus, links and form fields to find them.
- Hover a trigger. When the popup opens, move the pointer slowly across onto the popup itself. It must stay open, including while the pointer crosses any gap between the two.
- Hover again and, without moving the mouse, press Escape. The popup should close and the pointer and focus should stay where they were.
- Leave a popup open for half a minute. It should not disappear by itself.
- Use Tab to reach each trigger and repeat the steps: it should open on focus if it opens on hover, close with Escape, and stay open while focus stays.
- Zoom to 200 percent or use a screen magnifier and repeat a few checks; popups often behave differently at large sizes.
Failures and fixes
| Failure | Condition broken | Fix |
|---|---|---|
| Gap of a few pixels between icon and tooltip closes it | Hoverable | Make the tooltip part of the same hover area, or close it only after the pointer leaves both |
| Escape does nothing | Dismissible | Add a key listener that hides the popup without moving focus |
| Popup fades after a few seconds | Persistent | Remove the timer |
| Mega menu covers the page and only closes when the pointer leaves | Dismissible | Close on Escape as well |
| Tooltip appears on hover but never on keyboard focus | Not this rule; it fails 2.1.1 Keyboard | Show it on focus too |
A tooltip pattern that passes
The CSS below keeps the tooltip open while either the trigger or the tooltip has the pointer or focus, which covers hoverable and persistent. Dismissible needs a short script that hides the tooltip when Escape is pressed, without moving focus.
<span class="tip-wrap">
<button aria-describedby="t1">Delivery</button>
<span role="tooltip" id="t1">Arrives in 3 to 5 days</span>
</span>
.tip-wrap [role=tooltip] { display: none; }
.tip-wrap:hover [role=tooltip],
.tip-wrap:focus-within [role=tooltip] { display: block; }Because the tooltip sits inside the wrapper, moving the pointer from the button onto the tooltip keeps the wrapper hovered. Place the tooltip right next to the button with no gap, or use padding instead of margin to bridge the space.
Questions people ask
What does 1.4.13 WCAG require?
Extra content that appears on hover or focus must be dismissible without moving the pointer or focus, hoverable so the pointer can move onto it, and persistent until the user leaves or dismisses it. It is level AA.
Does the native title attribute tooltip fail 1.4.13?
No. Tooltips drawn by the browser from the title attribute are controlled by the browser, not the author, so they are outside this rule. They are still a weak way to give information, since touch and keyboard users often cannot see them.
Does a dropdown menu opened by click need to meet 1.4.13?
No. The rule covers content triggered by hover or focus. Click menus fall under different checks, for example keyboard access and name, role and value.
Which key should dismiss a tooltip?
Escape is the expected key. Pressing it should hide the popup while keyboard focus and the pointer stay where they are.
Can a tooltip close by itself after a few seconds?
No, unless the information it shows is no longer valid. It should stay until the user moves away or dismisses it.