Making content on focus or hover hoverable, dismissible, and persistent

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

The Technique is applicable to any technology that supports the display of additional content on pointer hover.

This technique relates to Success Criterion 1.4.13: Content on Hover or Focus (Sufficient).

Description

Additional content that is displayed when a user moves the pointer over a trigger or moves the keyboard focus to the trigger (for example, a pop-up) must remain visible to allow users time to read and interact with the content and must allow the user to move the pointer over the additional content.

Low vision users who magnify their screens often see only a small part of the screen at a time (their viewport). This means that the additional content may not be fully visible in the current viewport and users may need to move their mouse over the additional content to read it. Web authors should therefore ensue that additional content stays visible when the pointer moves away from the trigger to the (mostly adjacent) additional content. additional content should also be dismissible without moving the focus, so that users can read content covered by the additional content.

Examples

Tests

Procedure

For additional content that appears on hover check that:

  1. The pointer can be moved over the additional content without the additional content disappearing.
  2. The additional content stays visible and does not automatically close after a time.
  3. The content can be closed without moving the pointer way from the trigger. Either by pressing Esc, by pressing another documented keyboard shortcut, or by activating the trigger.

For additional content that appears on focus check that:

  1. The additional content stays visible and does not automatically close after a time.
  2. The content can be closed without moving the focus way from the trigger. Either by pressing Esc, by pressing another other documented keyboard shortcut, or by activating the trigger.

Expected Results

For content that appears on hover:

  • #1, #2 and #3 are true.

For content that appears on focus:

  • #1 and #2 are true.