Accessibility
a11y/hover-content-dismissible
Tooltips and popups shown on hover or focus close with Escape, stay while the pointer moves onto them, and do not vanish on a timer.
moderatemanualWCAG 1.4.13 · AAfe-a11y-visual
Why
A tooltip that covers what a magnifier user is reading, cannot be closed, or disappears when the pointer moves onto it to read it, blocks people who zoom or move the pointer slowly.
Fix
Show it on hover and on keyboard focus, close it on Escape without moving focus, keep it open while the pointer is over the trigger or the tooltip (no gap between them), and never hide it on a timeout. Interactive content belongs in a popover or disclosure, not a tooltip.
Examples
// good: Escape closes the tooltip without moving focus
trigger.addEventListener('keydown', (e) => { if (e.key === 'Escape') tooltip.hidden = true })Sources
Facts
- Id
a11y/hover-content-dismissible- Severity
- moderate
- Check
- manual a person reviews it; the report lists it as a checklist
- Applies to
page- WCAG 2.2
- 1.4.13, level AA
- Taught by the skill
fe-a11y-visualContrast, colour, size and reflow- Since version
- 0.1.0
Read it in the terminal
npx github:dawidolko/frontend-skills explain a11y/hover-content-dismissible