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.
Note 1
Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.
Note 2
Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.
About Success Criterion 1.4.13: Content on Hover and Focus
When additional content becomes visible upon receiving pointer hover or keyboard focus (and subsequently becomes hidden when these triggers are removed) it should be dismissible in a manner that allows users to close the content without needing to move the pointer or re-focus. This applies unless the additional content communicates an input error (that has then been addressed) or does not obscure or replace other content. If the content is hover-triggered, the pointer must be able to move over the additional content without causing it to disappear; the additional content should remain visible until the hover or focus trigger is removed, the user dismisses it, or the information is no longer valid.
One issue is preventing content from obstructing other information, which can lead to users missing important content underneath.
The second and third issues are that users must be able to access and close hoverable content through various input methods. For example, users might open a menu with a mouse and then interact with it via keyboard. Content triggered by keyboard or mouse should be accessible and dismissible through all relevant input methods, including touchscreens and assistive technologies.
For example, if a menu opens on hover with a mouse, but cannot be closed via keyboard, this is a failure. In this screenshot, you can move the mouse over a menu but there was no way to close it with the keyboard, such as pressing the Escape key.
A note about title attributes
Currently, there is a W3C note regarding the title attribute: it only appears on mouse hover and does not appear on keyboard focus. I have always stated that title attributes are not accessible because they do not convey information to keyboard users. Some may claim that the title attribute is a browser tooltip and thus exempt from accessibility concerns. However, it is well-known that JavaScript can easily be used to display the title content on keyboard focus as well.
Resources
- Mobile Site and Native App Accessibility Testing Guidelines (look for Requirement 4.1: Content on Hover, Focus or Input in the Test Cases documents)
- Mobile Accessibility Testing Guidelines Webinar
- W3C ARIA Tooltip Pattern