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
- 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.
- Provide a method to dismiss the additional content that appear on hover or keyboard focus.
- Make sure that content is present until the user moves away the mouse pointer from the triggering element or content block.
- Make sure that experience is persistent.
Points to Remember
References
Understanding Success Criterion 1.4.13: Content on Hover or Focus
Important to include being able to get to, interacting with, and navigate from the new content via the keyboard. If you included that point I missed it.