Go to search page
Almost, but not quite site front page
Almost, but not quite a guide to accessibility requirements
1 Perceivable

1.4.13 Content on Hover or Focus

Conformance level: AA
Criterion released in WCAG version: 2.1

Official description of the success 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.

What to do?

Ensure that additional content triggered by hover or focus is dismissible, hoverable, and persistent.

Why is it important?

Helps users who navigate via keyboard or assistive technologies interact with content reliably.

Common pitfalls

Custom tooltips don't comply with the requirements by default, so check all of those carefully. The title attribute in HTML is ok because the user agent defines its visual presentation.

Examples of failures for this criterion:

  • A pop-up opens on pointer hover. Due to the chosen screen magnification, the content is only partially visible. However, as soon as the pointer is moved away from the trigger towards the pop-up content so it can be read, the pop-up automatically closes.
  • Hovering over a chart with data points, pop-ups open to show details of the respective data point, somewhat offset from the data point itself. When moving the pointer towards the pop-up so it can be fully read with magnification, the pointer travels over other data points that cause the appearance of other pop-ups that replace the particular pop-up the user wanted to see.

The pointer needs to be able to be moved over the new content without the additional content disappearing and the appearance of the additional content is controlled by the user agent, not the author.

Remember the ARIA role "tooltip".

More about this criterion elsewhere