1.4.13 Content on Hover or Focus (AA)

Definition for WCAG 2.1 success criterion 1.4.13

1.4.13 Content on Hover or Focus: Where receiving and removing pointer hover or keyboard focus triggers additional content to become visible and hidden, respectively, 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.

Note: Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.

Note: Custom tooltips, sub-menus, and other non-modal popups that display on hover and focus are examples of additional content covered by this criterion.

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 non-modal 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.

Note: This criterion does not attempt to solve such issues when the appearance of the additional content is completely controlled by the user agent. A prominent example is the common behavior of browsers to display the title attribute in HTML as a small tooltip.

Note: Modal dialogs are out of scope for this criterion because they must take keyboard focus and thus should not appear on hover or focus.

Note: Content which can be triggered via pointer hover should also be able to be triggered by keyboard focus.

Note: If there is no content that is triggered by hover or focus, this success criterion is marked as not applicable.

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 ESC 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.

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.

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:

  • The user removes hover or focus from the trigger and the additional content, consistent with the typical user experience;
  • The user dismisses the additional content via the mechanism provided to satisfy the Dismissible condition; or
  • The information conveyed by the additional content becomes invalid, such as an error or success message.

Benefits

  • Users with low vision who view content under magnification will be better able to view content on hover or focus without reducing their desired magnification.
  • Users who increase the size of mouse cursors via platform settings or assistive technology will be able to employ a technique to view obscured content on hover.
  • Users with low vision or cognitive disabilities will have adequate time to perceive content appearing on hover or focus and to view the trigger content with less distraction.

Testing success criterion 1.4.13

Input into spreadsheet

Fail
Content becomes unusable on focus. Record the nature of the failure:
  • The trigger is not visible.
  • The content disappears when the pointer is hovered over the rendered content.
  • The content disappears without being explicitly dismissed.
Pass
  • The trigger is visible.
  • The content remains visible when the pointer is hovered over the rendered content.
  • The content remains visible until explicitly dismissed.
N/A
The sample does not trigger content on hover.

How to test