Understanding Content on Hover or Focus

Intent

The intent of this success criterion is to enable common user methods for perceiving and interacting with additional content which appears on pointer hover or keyboard focus. Examples are custom tooltips, sub-menus, and other nonmodal popups which display on hover and focus. Such additional content can present many challenges for users with low vision and others whose mouse accuracy may be low. Three conditions are specified by the criterion.

1. Visible Trigger

The intent of this condition is to ensure that the additional content does not interfere with viewing or operating the trigger. If the additional content is positioned to cover all or part of its trigger, then users may find the trigger can become much more difficult to perceive or activate due to visual field disruption. Under magnification, screen area that doesn't trigger the additional content may be the minority, resulting in a difficult user cycle to pan the magnified screen using the mouse without re-triggering the additional content. Two methods may be used to satisfy this condition and prevent such interference:

  1. Position the additional content so that it does not obscure any of the trigger with the exception of purely decorative content, such as whitespace or a background graphic which provides no information.
  2. Provide a mechanism to easily dismiss the additional content, such as by pressing escape or a close button.

For most triggers of relatively small size, it is desirable for both methods to be implemented. If the trigger is large, noticing the additional content may be of concern if it appears away from the trigger. In those cases, only the second method may be appropriate.

2. Hoverable

The intent of this condition is to ensure that content which may appear on hover of a target may also be hovered itself. Content which appears on hover can be difficult or impossible to perceive if a user is required to keep their mouse pointer over the trigger. When the added content is large, magnified views may mean that the user needs to scroll or pan to completely view it, which is impossible unless the user is able to move their pointer off the trigger without the additional content disappearing. Another common situation is when large pointers have been selected via platform settings or assistive technology. Here, the pointer can obscure a significant area of the additional content. A technique to view the content fully in both situations is to move the mouse pointer directly from the trigger onto the new content. This capability also offers significant advantages for users who utilize screen reader feedback on mouse interactions. This condition generally implies that the additional content overlaps or is positioned adjacent to the target.

3. Persistent

The intent of this condition is to ensure users have adequate time to perceive the additional content after it becomes visible. Users with disabilities may require more time for many reasons, such as to change magnification, move the pointer, or simply to bring the new content into their visual field. Once it appears, the content should remain visible until:

Additional Notes

Benefits

Examples

Example 1: Tooltip Allowing for Visible Trigger

Screenshot of a button with a mouse pointer over it, and a tooltip displayed  below the button Screenshot of a button with a mouse pointer over it, and no tooltip
A tooltip is displayed below a button on hover so as not to obscure the button itself. A user can also press the Escape key to clear the tooltip without moving the mouse.
Screenshot of a button with a focus indicator on it, and no tooltip
The button's tooltip also appears on focus and can be removed with the Escape key.

Example 2: Hoverable Tooltip

Screenshot of a button with a large mouse pointer over it, and a tooltip displayed  below the button which is obscured by the large pointer Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip
A button's tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer. The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.

Resources

Techniques

Sufficient

Advisory

Failure