1.4.13 Content on Hover or Focus

Description

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden (such as tooltips and sub-menus), three conditions must be met: the additional content must be dismissible without moving focus or the pointer, the additional content must be hoverable (the pointer can move over the additional content without it disappearing), and the additional content must be persistent until the user dismisses it, moves focus away, or the information is no longer relevant. This ensures low-vision users who zoom in and users with motor disabilities who may accidentally trigger hover events can perceive and use the additional content.

How To Test

Identify all elements on the page that display additional content on hover or focus (tooltips, sub-menus, custom dropdowns, etc.).
Hover over or focus each trigger and verify the additional content appears.
While the content is visible, move the pointer slowly from the trigger onto the additional content itself and verify the content remains visible (hoverable condition).
While the content is visible, press the Escape key and verify the content is dismissed without moving focus away from the trigger (dismissible condition).
Hover over the trigger, then move the pointer away without pressing Escape, and verify the content disappears only when focus or hover leaves the region (persistent condition).
Test with keyboard focus using the Tab key and verify the same three conditions are satisfied for keyboard-triggered content.
Test with a screen magnifier (such as Windows Magnifier or ZoomText) to verify content remains reachable when the view is zoomed.

Testing Tools

Color Contrast Analyser (CCA) — Free desktop app. Download from GitHub, install, use the eyedropper tool to measure contrast ratios on the demo. Read the ratio value and compare to AA (4.5:1) or AAA (7:1) standards.
Lighthouse — Built into Chrome DevTools. Open DevTools (F12), go to Lighthouse tab, select "Accessibility", and run the audit. Review contrast violations and pass criteria in the results.
axe DevTools — Browser extension for Chrome/Firefox. Install from official page, open DevTools, go to axe tab, run scan, and see detailed contrast violations with remediation advice.

Interactive Demos

Hover over the button. The tooltip appears, but it disappears the moment you try to move your pointer onto it to read it.

Code

Focus the button with Tab. The popover appears, but disappears when focus moves away, preventing you from reading or using it.

Code

Fail Explanation

A failure occurs when additional content triggered by hover or focus disappears before the user has had a chance to read or interact with it. The first demo shows a tooltip with pointer-events: none, which prevents hovering the tooltip itself. The second demo shows a popover that disappears when focus moves away. For low-vision users who use screen magnification, triggered content often appears outside their current view and requires panning the viewport, during which the hover state may be lost and the content disappears.

Pass Explanation

A passing implementation ensures all three conditions are satisfied. The additional content is dismissible by pressing Escape without moving focus. The triggered content is hoverable - the pointer can move from the trigger onto the content without it closing. The content remains visible until the user dismisses it or moves focus entirely away. Both demos include keyboard accessibility and Escape key dismissal.

WCAG Techniques

Failure: F95 (Failure due to content disappearing without user initiation), F87 (Failure due to content appearing on focus)
Success Techniques: G192 (Fully visible and hoverable), SCR39 (Making content visually and semantically dismissible)

Notes

This criterion was added in WCAG 2.1 to address problems low-vision users experience with hover-triggered content that disappears before they can read it. The Escape key requirement aligns with general usability conventions for closing dialogs and popups.

Techniques

WCAG techniques used in this demo: C40, SCR39