WCAG 1.4.13 Content on Hover or Focus

Success criterion 1.4.13 helps people who zoom in a lot, use a screen magnifier, have tremors or use the keyboard. Popups that open on hover or focus can cover what they are reading, or vanish before they can move the mouse to them. It was added in WCAG 2.1, is level AA and part of EN 301 549 (clause 9.1.4.13).

What the criterion requires

Where pointer hover or keyboard focus makes additional content appear and then hide (custom tooltips, sub-menus, mega menus, preview popups), all three conditions must be met:

• Dismissible: a way to dismiss the content without moving the pointer or focus, usually the Escape key — unless the content shows an input error or does not obscure or replace other content;
• Hoverable: if hover can trigger it, the pointer can move over the additional content without it disappearing;
• Persistent: it stays visible until the trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: content whose visual presentation is controlled by the browser and not modified by the author, such as title attribute tooltips.

Not covered: modal dialogs (they must take focus), and elements that are themselves revealed on focus, such as skip links.

Typical failures on an online shop

• a mega menu that closes when the mouse crosses a small gap between the menu item and the panel;
• a menu or mini-cart preview that opens on hover and cannot be closed with Escape while it covers the page;
• a size or delivery info tooltip that disappears after a few seconds;
• product image zoom-on-hover that covers the product details and cannot be dismissed;
• a help popup that opens on focus, covers the next form field and only closes when focus moves on.

How to check it

Automated: no automated rule in our checker maps to this criterion. Testing it means hovering, moving the mouse and pressing keys while watching what happens. This needs a manual check.

By hand: for every element that shows extra content on hover or focus: (1) hover it, then move the mouse onto the popup — it must stay; (2) with the popup open, press Escape without moving the mouse or focus — it should close; (3) wait — it must not disappear on a timer; (4) repeat with the keyboard using Tab. Do this at 200 % zoom too.

How to fix it

• Close hover and focus popups on Escape.
• Keep the trigger and the popup touching, or add a small delay before closing, so the pointer can move over.
• Remove timers that hide tooltips automatically.
• Open the same content on keyboard focus, or on click for touch users.
• Prefer click-to-open disclosure buttons for large menus and mini carts.

Related criteria

• 1.4.10 Reflow — content at high zoom.
• 1.4.11 Non-text Contrast — visible focus indicators and icons.
• WCAG 2.2 checklist — including 2.4.11 Focus Not Obscured and 3.2.1 On Focus.

Frequently asked questions

What do dismissible, hoverable and persistent mean?

Dismissible: the user can close the popup without moving the mouse or focus, usually with Escape. Hoverable: the mouse can move onto the popup without it disappearing. Persistent: it stays open until the user moves away, closes it or it is no longer valid.

Are title attribute tooltips covered?

No. Content whose presentation is controlled by the browser and not changed by the author, such as the tooltip from the HTML title attribute, is exempt.

Do mega menus fall under 1.4.13?

Yes, if they open on hover or focus. Sub-menus, custom tooltips and other non-modal popups shown on hover or focus are covered.

Can an automated tool test 1.4.13?

No. It requires hovering, focusing and pressing Escape and watching the result, so it is a manual check.