Understanding WCAG SC 1.4.13: Content on Hover or Focus

Success Criterion 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:

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

In modern design practices, adding new content to the existing work flow is being adopted widely. while the user is interacting with content using a mouse hover or a keyboard focus “the new content may be presented to the user in the form of tooltips, menus, pop-ups & slide outs etc.” These kinds of interactions might pose accessibility challenges to a wide variety of disable user groups as they tend to obscure the content or the user might have trouble pointing the mouse on the triggering element for a long time.

This success criterion intends to fill that gap between such additional contents and the operability for people with disabilities with the following guidelines:

Dismissible

When a person with low vision uses magnification software to magnify the content on the page & when widgets like tooltips, menus & pop-ups appear, they tend to obscure other content on the page. To avoid this users must be provided a mechanism to dismiss the widgets such as using an escape key or provide a close button while the user is on the additional content itself. By providing these options to dismiss content user can just avail one of these options & get back to the content on the page without moving the mouse pointer.

Hoverable

Generally the new content appears when the mouse pointer hovers over the triggering element or when it receives keyboard focus. Users might want to interact with this content & move the mouse pointer to the newly appeared content block, during this scenario there is a greater chance that content might disappear as the mouse pointer is moved away from the triggering element. Here, user must be given an opportunity to interact with the content & must be allowed to move the mouse pointer to the content block that appears.

Persistent

The intent of this condition is to satisfy the two conditions discussed above. Also, the users with disabilities would need more time to read the additional content. So setting a timed disappearance of the additional content is not encouraged unless the content itself becomes invalid like a “busy” message.
In other words, this is the summary:

• User must be provided with an option to dismiss content.
• User moves the mouse pointer from the trigger or the content block.
• The content presented is not valid any more…

Exceptions

Points to Ponder

Related Reads