Ensure that any additional content that appears and disappears on hover or focus is dismissible, hoverable, and persistent.
Table of Contents
Official Requirements
Success Criterion 1.4.13 Content on Hover or Focus (Level AA): 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.
Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.
Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.
Why is it required?
When additional content is activated by keyboard focus or pointer hover, it becomes an accessibility issue. This is because the content may interfere with the user’s ability to do a task or the user may not know that new content has appeared or may not have intended to trigger the interaction. Therefore, there should be a way to dismiss or hover on the additional content or users are provided more time to perceive the content.
How do we fix it?
- Provide a way to close or exit the additional content without moving the pointer away from the trigger. (For example: By pressing the escape key)
- Ensure that additional content stays visible for a long period of time and doesn’t automatically close after a time
- Provide a way to hover on the additional content without its disappearance
- ARIA: Using role=”tooltip” (Potential future technique)
- CSS: Using hover and focus pseudo-classes (Potential future technique)
Are there any exceptions?
The success criterion exempts additional content that is controlled by user agents such as browsers but not modified by the author (For example: Browser tooltips that are created through the HTML title attribute)
- When the additional content is used to indicate input errors
- When the additional content does not obscure or conceal other content
Mistakes to avoid
Additional content activated on pointer hover can not be hovered on by users.
