1.4.13 - Content on Hover or Focus
High-Level Description
This success criterion ensures that additional content displayed on hover or keyboard focus - such as tooltips, menus, or informational panels - remains accessible, readable, and controllable. It supports keyboard-only users, screen reader users, and people with motor or visual impairments by preventing content from disappearing unexpectedly.
Detailed Description
When content appears as a result of hover or focus, it must meet all three of the following requirements:
Dismissible
Users must be able to dismiss the content without moving the pointer or keyboard focus, for example by pressing Escape or activating a close button.
Hoverable
If the content appears on hover, users must be able to move the pointer onto the content itself without it disappearing.
Persistent
The content must remain visible until the user dismissed it, moves focus away, or the content is no longer relevant.
This criterion applies only to supplementary content, not to content that is always visible.
Indicators of Non-Compliance
- Tooltips disappear too quickly to read
- Content is inaccessible to keyboard users
- Hover content blocks other elements
Real-World Examples
| Compliant | Non-Compliant |
|---|---|
| Tooltip remains while focus is on it and includes a close button | Tooltip appears only on mouse hover, disappears on focus |
| Submenus stay open while focused and close intentionally | Submenus appear only on hover and vanish too quickly |
| Help panel is dismissible and does not obscure essential UI | Help text blocks content and cannot be dismissed |
Disability Impact
| Disability Group | Issues | Benefits |
|---|---|---|
| Motor Disabilities | Difficult to keep pointer steady | Persistent hover content supports control |
| Screen Reader Users | Focus-triggered content not announced | Improved focus ensures accessibility |
Supporting Documentation
Remediation Strategies
1 - Support Keyboard and Pointer Interaction
Ensure hover-triggered content also appears on keyboard focus
2 - Make Content Dismissible
Provide an explicit close mechanism or support the Escape key
3 - Avoid Obstructing Content
Design overlays so they do not cover essential UI or trap focus
4 - Text with Real Interaction
Test using keyboard-only navigation and screen readers to verify behaviour