Our series on the new WCAG 2.1 Success Criteria continues with the last new success criterion under the 1.4 guideline, Distinguishable. 1.4.13 Content on Hover or Focus is at level AA and primarily targets users with low vision. People with cognitive disabilities and users with tremors or limited movement also benefit.

1.4 Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

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:

  • Dismissable: 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.

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

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

Overview

The basic idea of this success criterion is to make it easier for users to interact with added content. Tooltips, drop-down menus, and popups are examples of added content. This new content is usually made visible when you put your mouse pointer over a “trigger” item such as a button or link. It can also display when an item receives focus. Some people have difficulty keeping the mouse pointer over the trigger item. Also, the new content will sometimes obscure existing content. The three requirements of this success criterion help make the added content more operable.

Dismissable

When using magnification, tooltips or added content can display on top of other information. Unless the newly visible content is displaying an error, the user must be able to dismiss that content without moving the mouse or changing focus. The method used to dismiss the content must work with the following:

  • mouse
  • keyboard
  • screen readers
  • magnification and zoom.

The easiest way to implement this is by providing a keyboard command, such as pressing the escape key, to close the content. The developer can also include a close button within the added content. Now the user can dismiss distracting content without scrolling or moving the mouse.  

Hoverable

Often the new content only displays when the mouse pointer is over the trigger element and disappears when the mouse moves off of the trigger. It can be hard for people with tremors or limited movement to keep the mouse over the trigger element. The new content may disappear before they have read it or flicker as their mouse moves on and off of the trigger.

This new success criterion helps remedy that situation. If the new content appears when the mouse pointer is over the trigger element, the content must stay visible as long as:

  • the mouse remains over the trigger
  • or the mouse moves onto and remains over the new content.

The size of the new content is usually larger than the trigger element. It is easier for users to keep the mouse pointer over the larger content area. Now there is less chance of the content being removed due to unintentional mouse movement. This also helps when using screen magnification. With magnification turned on, the trigger element and entire new content may not fit on the screen at the same time. When the content stays visible with the cursor over it, people can pan or scroll to see all of it.

Persistent

This rule combines the previous two. The content must remain visible until:

  • the user dismisses it,
  • the user moves the mouse off of it or the trigger,
  • or the content no longer contains important information.

Exceptions

Developer stuff

  • When the mouse pointer is over an HTML control that has a title element, browsers will display the title value. Since the browser performs this action, it is not covered by this success criterion.
  • Modal dialogs are not affected because focus moves into and remains within it until the user dismisses it.

Examples

Here is an example of a tooltip that meets the hoverable requirement. This video shows a styled button with a tooltip. The button is the trigger element. The tooltip displays when the button receives focus and disappears when focus is removed. When the mouse moves over the button, the tooltip displays. When the mouse moves off of the button the tooltip disappears. The tooltip also stays visible as the mouse is moved over it. The tooltip disappears when the mouse is moved off of it.

Demo created using jQuery accessible simple tooltip, using ARIA by Nicolas Hoffman.

Who Benefits?

  • People who have difficulty controlling the mouse have a larger target area to keep the mouse over so that the content remains visible.
  • People using magnification can scroll to see the entire content. They can also dismiss content that is covering other information.
  • Those with cognitive disabilities have a way to remove distracting content.

Takeaways

When dynamically adding content, check the following:

  • Can users move the pointer over additional content to keep it visible?
  • Does the content stay open as long as it’s relevant?
  • Does the content stay open as long as the user is interacting with it?
  • Is there a way for the user to dismiss the content?