This document provides information about the Acquia Web Governance accessibility check:
Does content that appears on hover or focus block important information or disappear before users can interact with it?
What
Additional content that appears upon focus or hover must at the same time be dismissible, hoverable, and persistent. For instance, this could be a submenu that becomes visible when the user navigates to the menu icon with the keyboard tab key or hovers the mouse pointer over the menu icon.
Dismissible: The additional content can be hidden again without the need to move keyboard focus or pointer. For example, a submenu that opens when the mouse pointer is hovered over can be closed again with the Esc key.
Hoverable: The additional content remains visible when the pointer is moved over it. For instance, a submenu that stays visible when the mouse pointer is moved away from the menu icon that opened the menu, and over the actual content within the menu.
Persistent: The additional content remains visible when the pointer hovers over the extra content or the element that opened the extra content. For example, a submenu remains open as long as the mouse pointer is positioned over either the content of the submenu itself or the icon that opened the menu. An exception is if the user actively chooses to close the additional content or the additional content is no longer valid.
Why
Additional content that becomes visible upon keyboard focus or pointer hover can be difficult to perceive or close. If you have this type of content, you must adhere to all of the following three requirements to ensure that the content is:
Dismissible: Allow users to see the content behind the additional content. For example, a visually impaired user with magnification software can press Esc on the keyboard to close a submenu that otherwise obstructs their limited field of vision.
Hoverable: Allow people with low vision and reading disabilities to view and perceive the content when they use magnification or text-to-speech software. For example, a user with reading difficulties can hover the mouse over the additional content to have it read aloud by their text-to-speech software.
Persistent: Allow enough time for all users to read and understand the content. For example, a slow reader has sufficient time to read and comprehend the content when it does not disappear automatically.
Who
This check affects the following users who have
Sight-impairments: Who access the site contents with screen magnification software or text-to-speech software.
Motion-impairments: Who wish to tab from link to link or who use alternative pointing devices.
Cognitive limitations: Who need sufficient time to read and understand content.
User story
Christina, 32 years old, was born with an inherited retinal disease that has gradually deteriorated her vision since childhood. Previously, she could read enlarged text on paper, but today she requires so much magnification that she primarily relies on magnification software for her computer. This type of assistive technology can enlarge everything on the computer screen by as much as 16 or 32 times.
“When I zoom the screen in to 16 times its size so I can see better, I only get a small portion of the screen. It's like I'm looking at the screen through a magnifying glass. So, I'm constantly moving the mouse around to reach the part of the screen I need to see. If there are things popping up all the time and covering other content, it's really annoying because then I can't move my "magnifying glass" without something getting in the way of something else, preventing me from reading what I need.”
Examples
This section provides some examples of the issue.
Example 1: Tooltip does not cover other content
In this example, a tooltip appears when the mouse pointer is placed over the info icon on the form. In this situation, there is no issue because the tooltip does not cover other content, and the mouse pointer can move from the information icon across the text on the tooltip itself.
Example 2: Tooltip covers other content
In this case, there is an issue with the tooltip displayed next to the form. The tooltip covers other content on the page and can only be hidden by moving the mouse pointer away. Allow the tooltip to be closed with the Esc key, so that they do not need to relocate the mouse pointer. This eliminates the problem.
Example 3: Tooltip with screen magnifier
In this example, we can see how a tooltip might be experienced by a user who relies on screen magnification. The user can only view a portion of the page, which means they can only see half of the text within the tooltip. Here, the user encounters an issue because they need to move the mouse cursor across the screen to be able to scroll to the part of the screen that contains the remaining text. However, as soon as the mouse cursor leaves the information icon that triggered the opening of the tool tip, the tooltip closes again. Consequently, the user is unable to scroll and read the text in the tool tip.
How
This section provides information about how to identify and review the issue.
How to identify it
Open your website and check that all elements on the page which show additional information on mouse hover or keyboard focus can be selected with the tab key.
Pay particular attention to items like menu buttons, buttons that open tool tips, and elements that cause additional details to appear.
You only need to identify items that automatically reveal additional information when you hover over them or when you place focus on them with the keyboard tab key.
You do not need to consider elements that open additional content only after a user action, such as when they click on them with the mouse or press Enter on the keyboard.
Evaluate the elements to ensure that they that they meet all three requirements:
Dismissible: Allow users to see the content behind the additional content. For example, a visually impaired user with magnification software can press Esc on the keyboard to close a submenu that otherwise obstructs their limited field of vision.
Hoverable: Allow people with low vision and reading disabilities to view and perceive the content when they use magnification or text-to-speech software. For example, a user with reading difficulties can hover the mouse over the additional content to have it read aloud by their text-to-speech software.
Persistent: Allow enough time for all users to read and understand the content. For example, a slow reader has sufficient time to read and comprehend the content when it does not disappear automatically.
Elements that meet all three requirements stated above can be marked as Reviewed in Web Governance.
Elements that do not meet all three requirements above must be fixed on your website before you mark them as Reviewed in Web Governance.
If this approach is not possible, then adjust the content and functionality to meet the three requirements mentioned above.
Note
Acquia recommends that you do not program the content to open on keyboard focus or pointer hover. Instead, program it so that additional content only opens when a user performs an action such as when they click the mouse or press the Enter button.
Does content that appears on hover or focus block important information or disappear before users can interact with it?
1.4.13 Content on Hover or Focus
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Does content that appears on hover or focus block important information or disappear before users can interact with it?
What
Additional content that appears upon focus or hover must at the same time be dismissible, hoverable, and persistent. For instance, this could be a submenu that becomes visible when the user navigates to the menu icon with the keyboard tab key or hovers the mouse pointer over the menu icon.
Dismissible: The additional content can be hidden again without the need to move keyboard focus or pointer. For example, a submenu that opens when the mouse pointer is hovered over can be closed again with the Esc key.
Hoverable: The additional content remains visible when the pointer is moved over it. For instance, a submenu that stays visible when the mouse pointer is moved away from the menu icon that opened the menu, and over the actual content within the menu.
Persistent: The additional content remains visible when the pointer hovers over the extra content or the element that opened the extra content. For example, a submenu remains open as long as the mouse pointer is positioned over either the content of the submenu itself or the icon that opened the menu. An exception is if the user actively chooses to close the additional content or the additional content is no longer valid.
Why
Additional content that becomes visible upon keyboard focus or pointer hover can be difficult to perceive or close. If you have this type of content, you must adhere to all of the following three requirements to ensure that the content is:
Dismissible: Allow users to see the content behind the additional content. For example, a visually impaired user with magnification software can press Esc on the keyboard to close a submenu that otherwise obstructs their limited field of vision.
Hoverable: Allow people with low vision and reading disabilities to view and perceive the content when they use magnification or text-to-speech software. For example, a user with reading difficulties can hover the mouse over the additional content to have it read aloud by their text-to-speech software.
Persistent: Allow enough time for all users to read and understand the content. For example, a slow reader has sufficient time to read and comprehend the content when it does not disappear automatically.
Who
This check affects the following users who have
Sight-impairments: Who access the site contents with screen magnification software or text-to-speech software.
Motion-impairments: Who wish to tab from link to link or who use alternative pointing devices.
Cognitive limitations: Who need sufficient time to read and understand content.
User story
Christina, 32 years old, was born with an inherited retinal disease that has gradually deteriorated her vision since childhood. Previously, she could read enlarged text on paper, but today she requires so much magnification that she primarily relies on magnification software for her computer. This type of assistive technology can enlarge everything on the computer screen by as much as 16 or 32 times.
“When I zoom the screen in to 16 times its size so I can see better, I only get a small portion of the screen. It's like I'm looking at the screen through a magnifying glass. So, I'm constantly moving the mouse around to reach the part of the screen I need to see. If there are things popping up all the time and covering other content, it's really annoying because then I can't move my "magnifying glass" without something getting in the way of something else, preventing me from reading what I need.”
Examples
This section provides some examples of the issue.
Example 1: Tooltip does not cover other content
In this example, a tooltip appears when the mouse pointer is placed over the info icon on the form. In this situation, there is no issue because the tooltip does not cover other content, and the mouse pointer can move from the information icon across the text on the tooltip itself.
Example 2: Tooltip covers other content
In this case, there is an issue with the tooltip displayed next to the form. The tooltip covers other content on the page and can only be hidden by moving the mouse pointer away. Allow the tooltip to be closed with the Esc key, so that they do not need to relocate the mouse pointer. This eliminates the problem.
Example 3: Tooltip with screen magnifier
In this example, we can see how a tooltip might be experienced by a user who relies on screen magnification. The user can only view a portion of the page, which means they can only see half of the text within the tooltip. Here, the user encounters an issue because they need to move the mouse cursor across the screen to be able to scroll to the part of the screen that contains the remaining text. However, as soon as the mouse cursor leaves the information icon that triggered the opening of the tool tip, the tooltip closes again. Consequently, the user is unable to scroll and read the text in the tool tip.
How
This section provides information about how to identify and review the issue.
How to identify it
Open your website and check that all elements on the page which show additional information on mouse hover or keyboard focus can be selected with the tab key.
Pay particular attention to items like menu buttons, buttons that open tool tips, and elements that cause additional details to appear.
You only need to identify items that automatically reveal additional information when you hover over them or when you place focus on them with the keyboard tab key.
You do not need to consider elements that open additional content only after a user action, such as when they click on them with the mouse or press Enter on the keyboard.
Evaluate the elements to ensure that they that they meet all three requirements:
Dismissible: Allow users to see the content behind the additional content. For example, a visually impaired user with magnification software can press Esc on the keyboard to close a submenu that otherwise obstructs their limited field of vision.
Hoverable: Allow people with low vision and reading disabilities to view and perceive the content when they use magnification or text-to-speech software. For example, a user with reading difficulties can hover the mouse over the additional content to have it read aloud by their text-to-speech software.
Persistent: Allow enough time for all users to read and understand the content. For example, a slow reader has sufficient time to read and comprehend the content when it does not disappear automatically.
Elements that meet all three requirements stated above can be marked as Reviewed in Web Governance.
Elements that do not meet all three requirements above must be fixed on your website before you mark them as Reviewed in Web Governance.
If this approach is not possible, then adjust the content and functionality to meet the three requirements mentioned above.
Note
Acquia recommends that you do not program the content to open on keyboard focus or pointer hover. Instead, program it so that additional content only opens when a user performs an action such as when they click the mouse or press the Enter button.
Web Governance