1.4.13 Content on Hover or Focus

What does it mean?

Tooltips, pop-ups and submenus that appear on mouse hover or keyboard focus must meet three conditions. Dismissible: users can close them without moving the pointer or focus, usually with the Escape key, unless the content reports an input error or does not cover other content. Hoverable: if the content appears on hover, users can move the pointer onto it without it disappearing. Persistent: it stays visible until the user moves hover or focus away, dismisses it, or the information is no longer valid.

This does not apply when the browser controls the appearance, for example the native tooltip from the title attribute. It also does not cover content that opens on click.

Who does it help?

• People using screen magnification who need to move the pointer to read the pop-up
• People with low vision whose view is blocked by pop-ups
• People with motor disabilities who cannot keep the pointer still
• People with cognitive disabilities who need more time to read

Common failures

• A tooltip that disappears as soon as the pointer moves towards it
• A hover menu that covers content and cannot be closed with Escape
• A tooltip that disappears after a few seconds on its own
• Information only available in a tooltip that never appears on keyboard focus

How we test it

• people only Manual only: nothing useful can be measured. The reviewer tests it directly.

Test question: Tooltips and menus that appear on hover/focus: dismissable (Esc), hoverable, and they stay until dismissed.

A person decides every criterion. No criterion ever passes automatically.

How to fix it

.tip { display: none; }
.has-tip:hover > .tip { display: block; } /* no focus, no Escape, gap closes it */

.tip { display: none; position: absolute; top: 100%; }
.has-tip:hover > .tip, .has-tip:focus-within > .tip { display: block; }
.has-tip.dismissed > .tip { display: none; }

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') document.querySelectorAll('.has-tip').forEach((el) => el.classList.add('dismissed'));
});
// remove 'dismissed' again on mouseleave / focusout

The tooltip also opens on focus, stays open while the pointer is over it (it is inside the trigger without a gap), and closes with Escape.

Practical tips

• Make sure there is no gap between the trigger and the pop-up, or hover is lost on the way.

Guides and patterns on this

• Navigation with submenus that does not need a mouseSubmenus behind buttons, Escape closes, plain links.

Official source

Understanding WCAG 2.2 at the W3C: 1.4.13 Content on Hover or Focus