Accessibility

1.4.13 - Content on hover or focus

Benefits users with:

  • low vision who use magnifier
  • low vision who increase the size of mouse cursors via platform settings or assistive technology
  • cognitive disabilities
  • motor impairments such as low pointer accuracy

Intent

Additional content that appears and disappears in coordination with keyboard focus or pointer hover often leads to accessibility issues. Reasons for such issues include:

  1. The user may not have intended to trigger the interaction.
  2. The user may not know new content has appeared.
  3. The new content may intefere with a user's ability to do a task.

Examples of such interactions can include custom tooltips, sub-menus and other nonmodal popups which display on hover and focus. The intent of this success criterion is to ensure that authors who cause additional content to appear and disappear in this manner must design the interaction in such a way that users can:

  • Perceive the additional content.
  • Dismiss it without disrupting their page experience.

There are usually more predictable and accessible means of adding content to the page, which authors are recommended to employ. If an author does choose to make additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

  • dismissable
  • hoverable
  • persistent

Ways to meet the criterion

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.

Examples

Dismissible tooltip

Users mouse over/focus the interactive items that have a tooltip function.

Success

Users can press the Escape key to clear the tooltip without moving the mouse/focus.

Failure

Tooltips are not removed by pressing Escape key so content under the tooltips are hidden.

Hoverable tooltip

Users mouse over the interactive items that have a tooltip function with a larger pointer.

Content on the tooltip is covered the large pointer so users cannot view all information.

Success

The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.

Failure

The tooltip itself is not able to be hovered so the tooltip is cleared when users move the pointer from the trigger item.

Hoverable menu items

Users mouse over the menu items that contains new content.

Success

The sub menu items themself are able to be hovered so the mouse pointer can be moved down to select an item.

Failure

The sub menu items themself are not able to be hovered so users cannot select sub menu items.

Supported general and HTML techniques to meet the criterion:

SCR39