--- title: "Does content that appears on hover or focus block important information or disappear before users can interact with it?" date: "2024-08-19T02:48:20+00:00" summary: "Ensure content appearing on hover or focus is dismissible, hoverable, and persistent for improved accessibility and user experience." image: type: "page" url: "/web-governance/does-content-appears-hover-or-focus-block-important-information-or-disappear-users-can-interact-it" id: "d0c7487f-14ac-4081-990c-9857783481fa" --- Table of contents will be added **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 ![A young woman with long dark hair wearing thick eye glasses.](https://acquia.widen.net/content/07aad8e0-3f43-42c9-9bac-6848124b5285/web/Mon_AccessibilityHelpCenter-UserStory-YoungBrunetteWomanWearingGlasses.png) 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. ![A web page contains a contact form where the visitor can sign up for a free trial for a piece of software. One of the form fields is labeled "Comments" and has a tooltip icon. The tooltip icon is hovered and a tooltip box is showing next to the form, not covering any other content elements. The cursor is placed inside the tooltip box.](https://acquia.widen.net/content/ea4bc8e3-8d32-4aed-98b4-8384aee434c6/web/Mon_AccessibilityHelpCenter-example_correct_tooltip.png?w=480&itok=3BZLaKL7) #### 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. ![A web page contains a contact form where the visitor can sign up for a free trial for a piece of software. One of the form fields is labeled "Comments" and has a tooltip icon. The tooltip icon is hovered and a tooltip box is showing next to the form, covering another form input field and a checkbox text. The cursor is placed inside the tooltip box.](https://acquia.widen.net/content/1bde7aea-d877-4e43-801f-25af1299eb10/web/Mon_AccessibilityHelpCenter-example_incorrect_tooltip.png?w=480&itok=saTeLv_p) #### 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. ![A web page contains a contact form where the visitor can sign up for a free trial for a piece of software. One of the form fields is labeled "Comments" and has a tooltip icon. The browser is magnified at 400% zoom. The tooltip icon is hovered and a tooltip box is showing. Part of the tooltip text in the box is cut off and cannot be read without needing to scroll the page first.](https://acquia.widen.net/content/6f85f2ef-b0c5-4075-9cc9-ebdc5d52c264/web/Mon_AccessibilityHelpCenter-example_unable_to_scroll_tooltip.png?w=480&itok=VY4Q76zB) How --- This section provides information about how to identify and review the issue. ### How to identify it 1. 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. 2. 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. 3. Elements that meet all three requirements stated above can be marked as **Reviewed** in Web Governance. 4. Elements that do not meet all three requirements above must be fixed on your website before you mark them as **Reviewed** in Web Governance. 5. 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. ### How to review it For instructions on how to review the issue in Web Governance, visit [How to review an accessibility issue](/node/59486). ### Who in your team can typically fix this? * UX-design to decide on if/when user interface updates on focus and hover. * Front-end development to implement needed changes. Additional resources -------------------- ### WCAG success criteria * [1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html)