Hover-revealed content must be hoverable and dismissable

Rule content-on-hover · Component patterns (best practice) · impact moderate · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Content that appears on hover (tooltips, mega-menus, preview cards) must be: hoverable — the pointer can move onto the revealed content without it vanishing (screen-magnifier users must reach it); and dismissable — it can be closed (e.g. with Escape) without moving the pointer, so it never permanently obscures other content. Revealed content that does not obscure anything (it opens into empty space or pushes content aside) is exempt from the dismissability requirement, per the SC. The engine hovers popup/tooltip triggers on the live page and verifies these behaviors; content that never re-hides after un-hover is additionally reported as persistent. The SC equally covers content revealed on keyboard FOCUS: triggers that reveal nothing on hover are re-tested with keyboard focus, and focus-revealed content that obscures other content must likewise dismiss on Escape and re-hide on blur.

How to fix#

Keep the revealed content open while the pointer is over the trigger OR the content (e.g. a shared hover container or a small close delay), and close it when the user presses Escape — for focus-revealed content, close it on Escape without moving focus and hide it again when the trigger loses focus.

Example#

<button aria-haspopup="true" aria-describedby="tip">Info</button><span id="tip" role="tooltip" hidden>Appears on hover, vanishes when you approach it</span>

<button aria-haspopup="true" aria-describedby="tip2">Info</button><span id="tip2" role="tooltip" hidden>Stays open over the tooltip; Escape closes it</span>

WCAG success criteria#

1.4.13 Content on Hover or Focus — Level AA#

Extra content revealed on hover or focus (tooltips, dropdown menus) must be dismissable without moving the pointer, hoverable itself, and persistent until dismissed.

Understanding 1.4.13

Standards#

This rule contributes to the following standards:

WCAG AA EN 301 549

References#

• WCAG — Content on Hover or Focus