Content on Hover or Focus
Content that appears on hover or focus and then goes away has to satisfy three conditions. Dismissible, meaning you can clear it without moving the pointer or the focus, which usually means the Escape key. Hoverable, meaning you can move the pointer onto the revealed content without it disappearing. Persistent, meaning it stays until you move off both the trigger and the content, or you dismiss it, or the information it carried stops being true. Two things are exempt from the first condition. Content reporting an input error, and content that covers nothing meaningful. And the whole criterion skips anything the browser draws that you have not restyled. That takes a plain title attribute tooltip out of scope entirely.
Why it matters
Hover-revealed content assumes a steady hand and a view of the whole page. Screen magnifier users have neither. Their magnified view follows the pointer, so panning across to read a tooltip means moving the pointer, which is the exact thing that makes the tooltip vanish. Somebody running a large mouse cursor has a related problem, because the pointer itself can cover most of a small tooltip. And a tooltip on a timer fails everyone who needed a few seconds to change magnification, move the pointer, or find the new content with their eyes. The three conditions are what turn a hover interaction from a reflex test into something people can use.
Who this rule protects
Screen magnifier users need to pan across the screen to read revealed content, and panning means moving the pointer. Users with tremor or low pointer accuracy trigger content they did not mean to and need a way to clear it. People who run a large mouse cursor find it covering the very thing that just appeared. Users with cognitive disabilities need the reading time a timer takes away.
How to check it yourself
- Hover over everything that reveals content and try to move the pointer onto what appeared. If it vanishes on the way, that is the documented failure.
- Press Escape while the content is showing and confirm it closes without you moving the pointer or the focus.
- Check whether the revealed content covers anything meaningful. Where it sits over white space or decoration only, it needs no dismiss mechanism. Neither does a message reporting an input error.
- Wait and watch. Nothing may close itself on a timer while the user is still reading, since the only permitted ways for it to go are moving off it, dismissing it, or the information becoming untrue.
- Check the content sits next to or over its trigger, so the pointer can reach it without crossing dead space on the way.
- Check the same content appears on keyboard focus, not on hover alone. That is 2.1.1 rather than this one, and it is usually the same fix.
- Leave native browser tooltips alone. A title attribute is drawn by the browser and sits outside the criterion, along with modal dialogs and skip links that appear on focus.
Failures we see most often
- A tooltip disappears the instant the pointer leaves its icon, which makes the text unreachable for anyone using a screen magnifier.
- Hover menus close while a user is still moving the pointer diagonally toward a submenu they intended to open.
- Help text auto-dismisses after three seconds, closing before some users can finish reading what it said.
- A tooltip covers the paragraph underneath it and offers no way to dismiss it except moving the pointer away.
- A tooltip is positioned well away from its trigger, so the pointer has to cross unrelated content and the tooltip closes on the way.
Who this one is for
Read from this rule's own note above, so the grouping and the note cannot disagree.
- Low visionpeople who can see the screen but not easily
- Motor and keyboard-onlypeople who cannot use a mouse, or cannot use one precisely
- Cognitive and learningpeople for whom the difficulty is understanding, remembering, or staying with it
How to fix it
- Keep the revealed content open while the pointer sits over either the trigger or the content itself. Position the content next to or over the trigger, so the trip between them is short.
- Support the Escape key as a dismiss, and do not make the pointer move for it to work.
- Take the timer out. Let the content close when the user leaves it or dismisses it, and not before.
- Or place the content where it covers nothing meaningful, and the dismiss requirement does not apply at all. That is a free pass, and it is a positioning decision rather than a code one.
- Add a short close delay for diagonal pointer movement toward a submenu. That is menu-design convention rather than a WCAG requirement, and it is what makes a mega-menu usable.
Step-by-step fix guides (2)
Passes vs. fails
Passes
The tooltip stays open while hovered, closes cleanly on Escape, and never times out on its own.
Fails
An info icon's tooltip disappears before a zoomed-in user has time to pan across and actually read it.
In audits and lawsuits
Mega-menus and info-icon tooltips are the usual suspects we find in audits. We test with magnification actually running, the same way an affected user meets the feature, and we capture the exact moment content disappears before it can be read in full. There is no automated rule for this criterion at all, so it is hands-on or it is untested. Two things are worth getting right in a report. A tooltip that appears on hover and never on keyboard focus is failing 2.1.1 Keyboard rather than this one. And a tooltip role is not a sufficient technique here, whatever a component library's documentation implies, so adding the role changes nothing about whether these three conditions are met.