Hover content disappearing

Link to Hover content disappearing copied to clipboard

content-hover-disappears

Rule

When additional content is triggered on pointer hover or on keyboard focus, that additional content MUST be visually perceived and MUST be dismissible.

Background

Content that appears on mouse hover or keyboard focus - such as tooltips, drop-down menus, and popups - can cause difficulties for people with disabilities. For people with low vision who use screen magnification, such content can be too large to fit in the magnified viewport or it may obscure other information on the screen. People with motor disabilities may have difficulty keeping the mouse pointer over the popup trigger. Sometimes, popup content is displayed only temporarily and may not give people with disabilities time to read the content. Content that appears on hover or focus should be dismissible, hoverable, and persistent. When these conditions are met, users have more control over interaction with the content.

How to Fix

Fix this issue by ensuring that content that appears on mouse hover or keyboard focus meets ALL of the following requirements:

  1. Dismissible: If the content obscures or replaces other content, it can be dismissed via keyboard without moving mouse hover or keyboard focus - such as by pressing the Escape key.
  2. Hoverable: If the content is triggered by mouse hover, the user can move the mouse pointer to the content without the content disappearing.
  3. Persistent: The content stays visible until mouse hover or keyboard focus is moved or it is dismissed by the user (see #1 above), or the information is no longer valid.