Skip to main content
WCAGrules
Quick navigation

Make hover content hoverable and dismissible

SCR39 is a sufficient technique with no qualifier attached, and it splits into two sets of rules depending on what triggered the content. Hover content owes three things. The pointer can travel onto it without it vanishing, it stays put rather than timing itself out, and it closes without the pointer having to move. Focus content owes two of those three. There is no pointer to move onto it, so the hoverable requirement has nothing to test there. On dismissal, three mechanisms are accepted rather than one. Escape, a defined shortcut, or activating the trigger again. Testing only for Escape marks working implementations as broken.

How we find it in an audit

Reviewers open the thing. Then they try to reach it. That is the check the pattern most often fails. Move the pointer off the trigger and toward the popup along the shortest path and see whether it survives the journey. Then leave it alone for a while to see whether it closes itself. Then close it from the keyboard without touching the mouse, trying Escape first and the trigger second. Automated tools can find the handlers and the delay. Whether a tooltip is reachable is a question about geometry and timing that has to be watched.

How affected users experience it

The user this rule was written for is somebody magnifying the screen. Their viewport is a small window onto a large page, so a tooltip that appears near the trigger may be sitting entirely outside what they can see. The only way to read it is to move the view. Moving the view moves the pointer, and moving the pointer closes the tooltip. That is the trap. Content that covers what is underneath it causes the same problem in reverse. It hides the sentence they were part way through, and the only way back is to move the pointer somewhere it will not follow.

Passes vs. fails

Passes: hoverable, dismissable, persistent. Fails: vanishes when the pointer moves.

Passes

term.onmouseover = show;
popup.onmouseover = show;
document.onkeydown = function (e) { if (e.key === "Escape") hide(); };
// Reachable with the pointer, closable from the keyboard, and it stays until the user is done.

Fails

term.onmouseover = show; term.onmouseout = hide;
// Vanishes the instant the pointer leaves the term. Ignores Escape. Sits over the next paragraph.

Other ways to satisfy this rule

2 guides on this site are filed under 1.4.13 Content on Hover or Focus. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique SCR39: Making content on focus or hover hoverable, dismissible, and persistent. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations