Why it matters
Tooltips and popups that disappear when users try to read them or that cover other content create barriers. Screen magnifier users especially need to hover over tooltip content to read it.
Common violations
- Tooltips that disappear when the pointer moves toward them
- Popups that cannot be dismissed without moving focus
- Hover content that covers other interactive elements
- Content that disappears too quickly to read
Code examples
Bad
<div class="tooltip-trigger" title="Info">
Hover me
</div>
<!-- Native title tooltips fail all three requirements -->Good
<div class="tooltip-trigger" aria-describedby="tip1">
Hover me
<div id="tip1" role="tooltip" class="tooltip">
Additional info
</div>
</div>
<style>
.tooltip { pointer-events: auto; } /* hoverable */
</style>
<!-- Dismiss on Escape, stays visible while hovered -->How to fix
Make hover/focus content dismissable (Escape key), hoverable (pointer can move to it without it disappearing), and persistent (stays visible until user dismisses or moves away). Avoid title attributes for important information.
Related criteria
Related resources
Scan your site