Pop-ups are not used on hover, unless they are dismissable and robust
Design Notes
Content on hover
Avoid including functionality which relies on mouse hover in designs — such as hiding content behind tooltips.
The 'hover' interaction is not available for any user on a mobile device and can pose accessibility barriers for users. Key considerations include: if tooltip content is triggered on hover it must also be keyboard operable, the user must be able to dismiss content without moving their mouse or keyboard focus and the content must remain visible until user moves mouse or keyboard focus.
Rather than hiding content behind tooltips, consider working with a content designer to see if text can be edited such that it can be included on screen. Or, if content must be hidden from view, generally, an expand and collapse accordion component will provide more accessible results.
More information
Developer Notes
Ensure that overlays that appear on hover are dismissible and robust
Additional content should not interfere with viewing or operating original content on the page.
Where additional content that appears and disappears when activated via pointer hover or keyboard, the interaction should be designed so users can perceive the additional content and dismiss it without disrupting their current page journey.
If hovering the mouse over an element triggers additional content to appear (like in pops-ups or tooltips), make sure that:
- The additional content can be dismissed without moving your mouse — i.e. using the ESC key
- If the user needs to hover or interact with the extra content, then the mouse cursor can move to it and use it, without it disappearing
- The content stays visible until mouse is removed, the user dismisses it, or it's no longer useful.
Testing Notes
Pop-ups are not used on-hover or on-focus, unless they are dismissible and robust
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
- Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
- Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
- Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
Impact range: Medium - Low
Test type: Manual
Demo: Inclusive Components: Tooltips and Toggletips
WCAG Reference: Understanding Success Criterion 1.4.13 Content on Hover or Focus