Checkpoint 1.4.13 Content on Hover or Focus

Where hover or focus actions cause additional content to become visible and hidden, the additional content is dismissable, hoverable and persistent. (Level AA)

Rationale

Objective: If content can appear and disappear without a user intentionally triggering it, design the interaction in such a way that all users can operate it and perceive the content

Content changes that occur as a result of a user hovering over an element or giving the element focus -- normally by navigating to it via the keyboard -- are difficult to detect by those who cannot see well. Such users may not be aware anything has changed. Additionally, this kind of new content is frequently more difficult for such users to interact with or consume. So this checkpoint, which lists a series of requirements for such content, is intended to primarily benefit low-vision or blind users.

WCAG stipulates that for content that is intended to both appear and disappear in concert with hover or focus, the following must be 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.

There are two main objectives achieved by these requirements. The first (covered by hoverable) is that low vision users, particularly those who rely on magnification to enlarge the content, are able to move their pointer toward the newly revealed content so they can read it. Magnification often results in only part of the new information being visible in the viewport until the user reorients the pointer. If the new content disappears the moment the user moves the mouse off the triggering element, or after some arbitrary time period, it will be difficult or impossible for some users to read it.

The second objective is that blind users and others who depend on the keyboard for operation, will be able to both trigger and dismiss the new content without disrupting their work. If the new information obscures other content, the user should be able to dismiss it easily without navigating -- unless the new content is a warning about an error. The persistent requirement ensures that the information will remain present until the user has reviewed it.

Note: This checkpoint should not be seen as advocating for an increased use of designs where content is only triggered by hover or focus. Content or context changes should predominantly occur in response to users activating or updating elements. The checkpoint's main purpose is to redress problems when this sub-optimal interaction choice is adopted.

Exception: WCAG allows situations where "The visual presentation of the additional content is controlled by the user agent and is not modified by the author." This primarily covers use of the HTML title attribute. Browsers determine the display position and timing of title text, so it is not author-controlled. However, title as the means of providing additional content is discouraged by many accessibility advocates.

IBM has simplified the normative language of this checkpoint. Refer to Understanding 1.4.13 (external link to WCAG) for more information.

Development Techniques

This paragraph appears generically in all checkpoints. Review the General techniques as well as other tabs applicable to your technology.  Prioritize the use of technology-specific techniques, and implement the General techniques as needed. You are always required to find, understand and implement accessible code techniques to meet the checkpoint. The documented techniques and supplements are not exhaustive; they illustrate acceptable ways to achieve the spirit of the checkpoint. If numbered, techniques are in order of preference, with recommended techniques listed first. Where used, IBM information that complements the WCAG techniques is indicated as supplemental.

General techniques

There are currently no sufficient General techniques. Ensure you review WCAG Common Failures to avoid development mistakes.

Web (HTML, ARIA, CSS) techniques

In addition to the General techniques, any item in this section represents a technique deemed sufficient.

Mobile Native (iOS) techniques

There are no specific Mobile Native iOS techniques for this checkpoint. Refer to the General techniques section.

Eclipse techniques

There are no specific Eclipse techniques for this checkpoint. Refer to the General techniques section.

Windows-based (MSAA+IA2) techniques

There are no specific Windows-based (MSAA+IA2) techniques for this checkpoint. Refer to the General techniques section.


Many links in this checklist reside outside ibm.com at the Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation 05 June 2018: http://www.w3.org/TR/WCAG21/

Copyright © 1994-2019 World Wide Web Consortium, ( Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang University). All Rights Reserved.

Copyright © 2019 IBM Corporation