Perceivable · Level AA · 1.4.13
Content on Hover or Focus
Extra content that pops up on hover or keyboard focus — a tooltip, a custom preview — has to be dismissable without moving the pointer away, stay put while the pointer moves onto it, and remain visible until the user actually dismisses it or moves away, not vanish on its own after a timeout.
- Low vision
- Cognitive
- Motor
How to recognize it
Trigger a tooltip or hover-revealed panel and try three things: press Escape and see if it closes without also having to move the mouse away; try to move the pointer from the trigger element onto the tooltip itself and see if it disappears the instant the cursor leaves the trigger; and just wait, to see if it vanishes on its own after a few seconds regardless of what you're doing. Someone using screen magnification has to move their pointer to see a tooltip that appeared off in a different part of a heavily zoomed-in view, and if that tooltip vanishes the moment the pointer starts moving toward it, they can never actually read it. People with low pointer accuracy — including tremor or other motor conditions — need the ability to dismiss unwanted popped-up content without a precise pointer movement, and people with cognitive disabilities benefit from content that doesn't self-dismiss on a timer before they've finished reading it.
How to fix it
Make hover/focus-triggered content dismissable with Escape, without requiring the pointer to move. Keep it visible ('hoverable') when the pointer moves from the triggering element onto the content itself, rather than disappearing the instant the cursor leaves the trigger. Keep it visible ('persistent') until the user dismisses it, moves focus away, or the underlying information is no longer valid — not on an arbitrary timer. Native title-attribute tooltips generally fail this by default since they can't be kept open by moving toward them; a custom tooltip component built with these three behaviors in mind is usually the better choice.
Example
Avoid
<span title="Extra detail that disappears the moment the pointer moves">Info</span>
<!-- native title tooltip: can't be hovered into, can't be dismissed with Escape -->Prefer
<button aria-describedby="tip1">Info</button>
<div id="tip1" role="tooltip">
Extra detail that stays open while hovered and closes on Escape
</div>