a11y/hover-content-dismissible

Dlaczego

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.

Poprawka

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.

Przykłady

// good: Escape closes the tooltip without moving focus
trigger.addEventListener('keydown', (e) => { if (e.key === 'Escape') tooltip.hidden = true })

Źródła

• WCAG 2.2, Understanding SC 1.4.13 Content on Hover or Focus
• WAI-ARIA Authoring Practices, Tooltip pattern

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/hover-content-dismissible