Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: (Level AA)
- 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.
The common implementation of navigation menus shows the submenu on mouse hover. In most cases the submenus are not focusable by keyboard alone. Such implementations make the screen reader user even more frustrated as they are not aware of the display of new content.
Similar instances are quite common with display of tooltips or other information when user hovers the mouse pointer, shows a status message or an error message. Success criteria 1.4.13: Content on Hover or Focus addresses such critical problems.
People with low vision who depends on magnifier, those who have the habit of using large cursor benefit from this success criterion. Similarly people with low vision and cognitive challenges who need more time to identify the additional content on the screen benefit from this success criterion.
Conditions to satisfy for 1.4.13: Content on Hover or Focus
To ensure that the content displayed on mouse hover or focus is accessible, content developers must ensure the following 3 requirements are satisfied.
When a tooltip or additional content is displayed on mouse hover, the newly displayed content should not obscure the content read by the user. Users who depend on magnifier will have tough time if the newly displayed content overlaps the currently reading content. The methods recommended by the working group to solve this problem are,
- Place the content near the triggering element in such a way that the newly displayed content does not interfere with the existing content. The newly displayed content can be overlapped on a white space or decorative images.
- Allowing the user to dismiss the newly displayed content without moving the pointer away from the current content. Using escape to dismiss the content.
- Providing a close button in the newly displayed content that enable the user to dismiss the content but will not be ideal in situations where the content displayed is away from the userâ€™s magnifier viewing region.
The second condition of this success criteria is to ensure that the newly displayed content must be hoverable. This also implies that the newly added content should be available near to the triggering element so that the user can directly hover from triggering element to the newly displayed content without the content gets disappeared. In case the content is large enough that the user has to move the focus from triggering element to the newly displayed content to accommodate the magnifier. This also helps the users who may have large cursor option set in their system settings or those who benefit from mouse movement with screen reader in use.
This condition of the success criteria talks about the adequate time for the user to read the newly displayed content. How long should the newly displayed content available for the user? Below are the recommended cases to satisfy this condition.
- The user removes hover from the triggering element. This is the typical user experience.
- When condition 1, dismissable is met.
- When the newly displayed content becomes invalid. E.g. the tooltip that shows the agent is busy in a chat client and as soon as the agent becomes available the displayed content becomes invalid, so the content can be disappeared.
Exceptions for 1.4.13: Content on Hover or Focus
- The visual presentation of the additional content is controlled by the user agent and is not modified by the author. Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.
- Modal dialogs are out of scope for this success criterion as they need explicit keyboard focus.
1.4.13: Content on Hover or Focus is a WCAG 2.1 success criterion.