accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Extra content on hover or focus

On this page:


Summary

If content (like a tooltip) appears when users hover over an element with their mouse (or tab to it with their keyboard), it must be easy to dismiss, easy to reach and remain visible.

If moving the mouse or the keyboard focus to an element triggers additional content to appear and then hide again (like in pops-ups or tooltips), make sure that:

  1. The ‘extra’ content can be dismissed without moving your mouse, keyboard focus or screen reader cursor.
  2. If the user needs to hover or interact with the extra content, then the mouse cursor can move to it and use it, without it disappearing.
  3. The content stays visible until mouse or keyboard focus is moved, or the user dismissed it, or it is no longer useful.

Requirements

For content to be dismissed:

For content to be hoverable:

For content to be persistent:

Once it appears, the content should remain visible until:

Common mistakes

Why?

For disabled users on your website who may accidentally trigger content, or are not using a mouse, it is frustrating when pop up content …

Content which appears on hover can be difficult or impossible to perceive for users who struggle to read, if they are required to keep their mouse cursor over the trigger.

Official wording in the Web Content Accessibility Guidelines

1.4.13 Content on Hover or Focus (Level AA): Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.

Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.

See the W3C’s detailed explanation of this guideline with techniques and examples.


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email