Hover States and Focusable Content

Owned by Christina Lutz-Hatfield
Last updated: Aug 24, 2024
2 min read

 

Table of Contents

Overview

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

  • the user may not have intended to trigger the interaction

  • the user may not know new content has appeared

  • the new content may interfere 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 AND

  • 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

General Guidelines

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following should apply:

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.

Please see more detailed information on how to comply with this guideline.

WCAG Related Guidelines

1.4.13 Content on Hover or Focus

Â