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.
Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
Description
While browsing the web, we quiet commonly see the tooltips. These tooltips typically appear when we hover or focus on the elements. Authors use these tooltips to provide more information about the trigger/target. Tooltip content could be submenus, non-modal, help text, so on… Users without disabilities neither have any concern accessing the tooltip content nor have disruptions with the tooltip content. However, users with disabilities might have disruptions with the tooltip content as well as problems/challenges in accessing tooltip content itself. tooltips, in general, impose lot of challenges to people with disabilities and let us look into them in-detail.
Problems/challenges with the tooltips
- You might know that certain group of low vision users use screen magnifier to view the web content. When these users magnify the web content, only less portion of the web content is visible in the view port. To access the complete web content, users of magnifier need to keep on pan the screen by using pointer and view the content in the restricted area. Imagine if entire portion of the restricted view port triggers additional content/tooltip then it is difficult or impossible for the users to pan the screen without retriggering additional content, and this is going to create a very big problem for such users.
- You might know that certain group of low vision users use keyboard. While accessing the web, low vision users who use keyboard may encounter the unexpected tooltips when they focus on the certain elements. This unexpected behavior may create a problem for the low vision users in accessing the obscured content.
- You might know that certain group of low vision users use large cursors. When those users use large cursor then large cursor may overlap the additional content/tooltip that is displayed on hovering the trigger/target. To view the additional content/tooltip content in such scenarios, users of low vision might have to move the pointer from trigger/target to the additional content/tooltip content. While doing so, tooltip content sometimes may get disappeared altogether, and this makes difficult or impossible for the low vision users to access the tooltip In addition, magnifier users might also need to move their mouse pointer to tooltip content to view/access the tooltip content properly. It is impossible or difficult for such users to view/access the tooltip content if the tooltip content gets disappeared as soon as pointer off from the trigger/target.
- You might know that certain group of cognitive disabilities take longer time to perceive the content. While they are perceiving the tooltip content, tooltips sometimes get disappeared automatically. When tooltips disappear automatically after a while then it is going to be difficult for such users to perceive the tooltip content.
Solution
WCAG 2.1 introduces content on hover or focus checkpoint to address the tooltip challenges that people with disabilities face. When author follows the guidance that is provided in this checkpoint then most of the tooltip challenges are going to be resolved. Let us look into what guidance this checkpoint is providing
- Dismissible: tooltip content should be dismissed when user presses escape key in the keyboard unless tooltip content does not obscure any content or tooltip content displays on the white/decorative background. This condition helps to resolve the problem 1 and 2 that are mentioned in the problem section of this blog post.
- Hoverable: user should be able to hover the tooltip content when pointer is moved from trigger/target to the tooltip content. Basically, the tooltip content should not be disappeared as soon as pointer of from the target. This condition helps to resolve the problem 3 that is mentioned in the problem section of this blog post.
- Persistent: tooltip content should remain on the screen unless user dismisses it or user navigates away from both trigger and tooltip content or the instance itself is invalid. Basically, tooltip content should not be disappeared after a while. This condition helps to resolve the problem 4 that is mentioned in the problem section of this blog post.
When author follows these 3 conditions then most of the tooltip challenges that I mentioned in the problem section of this blog post are going to be addressed. In a nutshell, people with low vision and people with cognitive disabilities would not face most of the tooltip challenges when the conditions of this checkpoint are met.
exceptions
This checkpoint is applicable only for the author supplied tooltips but not user agent based tooltips. To give an example, tooltips that are displayed with the HTML title attribute are an exception to this checkpoint.
References