WCAG 2.1 Check Point 1.4.13 - Content on Hover or Focus

Summary:

Hover and focus events should not obscure content and should be dismissible.

Details:

Content that appears and disappears in coordination with keyboard focus or pointer hover, such as custom tooltips, sub-menus, overlays and other non-modal popups, often lead to accessibility issues. Therefore, content that appears and disappears on hover or focus must be designed in a way that meets the following conditions:

  • Dismissible: A mechanism must be available to dismiss the additional content without moving pointer hover or keyboard focus (such as enabling the Escape key to dismiss the content)
  • Hoverable: If pointer hover triggered the additional content, then the pointer must also be able to move over the additional content (i.e. content must not be obscured);
  • Persistent: The additional content must remain visible until the hover or focus trigger is removed, the user dismisses the additional content, or its information is no longer valid (such as a status message that changes status).

Exceptions

This guideline does not apply to custom modal dialogs since they are typically triggered on click events and content that is controlled by the user agent (such as a tooltip displayed via the HTML title attribute) and is not modified by the author.

Not sure where to start?

Start with a free analysis of your website's accessibility.

Get Started