Skip to content
Andrew Hick edited this page Jun 6, 2023 · 4 revisions

1.4.13 Content on Hover or Focus

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, 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.

When this is applicable

When additional content appears on hover or focus

Check hover and focus

Identify any elements which trigger additional content. Check those twice, once with keyboard only and once with a mouse or trackpad.

  1. Hover over the element and/or focus on the element.
  2. Wait 10 seconds - if it closes by itself, it's a fail (unless the message disappears because it is no longer valid).
  3. Press the Esc key - if it doesn't close, it's a fail (unless it's an error message or if it doesn't overlap or replace other text). Closing shouldn't change other context.
  4. Hover over the element again (only for hover, not for focus) - check if it stays open when moving the pointer over the area.

Exceptions

This Success Criterion does not apply to content showing due to native browser behaviour, for example tooltips from a title attribute.

Mobile app testing

For hover: This is difficult to test on a mobile device, but in some cases, a hover state might be achievable by tapping on an item and then sliding the pointer away from it.

For focus: Use an external keyboard to navigate around content on the screen and if additional content becomes visible then it should be dismissable, hoverable (where the device allows it) and persistent.