What is it?
When content appears as a result of hover or focus actions, users should be able to dismiss the additional content, interact with it without it disappearing, and have enough time to read or engage with it.
This applies to hover or focus-triggered content such as tooltips, sub-menus, or popups. It ensures that these elements are dismissable, hoverable, and persistent and don’t interfere with a user’s reading experience or cause them to miss content.
Why does it matter?
When content isn’t dismissable, hoverable, or persistent, it can create significant frustrations for users or make pages unusable. If users can’t dismiss extra content, it might block key parts of the page, making it impossible to interact with the original content. For example, a tooltip or popup that can’t be closed can completely hide important information or buttons.
When hoverable content disappears the moment the pointer moves away, users might never get the chance to read or interact with it fully. This is challenging for people who need more time to process the content or who rely on screen magnification, where moving the pointer might require panning across a zoomed-in screen.
If content isn’t persistent and vanishes too quickly, it can leave users confused or frustrated, especially those with cognitive or motor impairments. They might not even realize what happened or have the time to engage with the content.
Who is affected?
People with low or limited vision. People with motor impairments. And people with cognitive disabilities.
People with low or limited vision may need more time to read or dismiss content or may find it challenging to keep the pointer in the right spot on a zoomed-in screen.
People with motor impairments can find it difficult to maintain precise pointer movements to keep content visible for long enough to read or interact with it.
People with cognitive disabilities may find it hard to understand unpredictable content. They may not know what’s causing the content to show up or know that they need to read it quickly.
How to implement 1.4.13
Make Content on Focus or Hover Hoverable, Dismissable, and Persistent
Check that any content that appears on focus or hover actions can be dismissed, doesn’t suddenly disappear, and the user has enough time to read or engage with it.
Hover-Triggered Action
When working with hover-triggered content, make sure that:
- The pointer can be moved over the additional content without disappearing
- The additional content stays visible and doesn’t automatically close
- The content can be closed by pressing the Esc key, pressing another shortcut, or activating the trigger
Focus-Triggered Action
When working with focus-triggered content, make sure that:
- The additional content stays visible even and doesn’t automatically close
- The content can be closed by pressing the Esc key, pressing another shortcut, or moving the focus away
ARIA role=”tooltip”
Use ARIA attributes like role="tooltip", this attribute signals to assistive technology, such as screen readers, that the associated content is a tooltip and makes it clear that it provides added information about a particular element.
When combined with aria-describedby attribute, you can link the tooltip to the trigger so that screen readers can announce the tooltip content when the trigger gains focus.
CSS pseudo-classes
Using CSS pseudo-classes like :hover and :focus allows you to control how elements behave and look when a user interacts with them.
:hover:Applies styles when a user hovers their pointer (mouse or trackpad) over an element.:focus: Applies styles when an element receives keyboard focus, such as when a user tabs to a button or input field.
Conclusion
Hover and focus-triggered content can enhance usability, but only if designed with accessibility in mind. By making it dismissible, hoverable, and persistent, you ensure everyone—regardless of ability—can interact with it smoothly.
