1.4.13 Content on Hover or Focus

This document gives information about the related Acquia Optimize checks:

• Additional content that appears and disappears in coordination with keyboard focus or pointer hover does not obstruct operation.

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 using the keyboard's tab key or hovers the mouse pointer over the menu icon.

• Dismissible: means that the additional content can be hidden again without moving keyboard focus or pointer. For example, a submenu that opens when the mouse pointer is hovered over can be closed again by pressing the Esc key.

• Hoverable; means that 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; means that the additional content remains visible as long as the pointer is hovering 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 cause issues when users encounter difficulty perceiving or closing the additional content. If you have this type of content, it is therefore necessary to adhere to all the following three requirements:

• Dismissible; so that people can still see the content behind the additional content. For example, a visually impaired user using magnification software could press the "Esc" key to close a submenu that otherwise obstructs the user's limited field of vision.

• Hoverable; so that people with low vision and reading disabilities can view and perceive the content when using magnification or text to speech software. For example, a user with reading difficulties could hover the mouse over the additional content to have it read aloud by the user’s text-to-speech software.

• Persistent; so that everyone has enough time to read and understand the content. For example, a slow reader would have sufficient time to read and comprehend the content when it doesn't disappear automatically.

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¶

Examples¶

This section gives some examples of the issue. 

Example 1¶

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 doesn't cover other content, and the mouse pointer can move from the information icon across the text on the tooltip itself.

Example 2¶

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. If the tooltip could be closed simply by pressing the "Esc" key, so users could close it without relocating the mouse pointer. This would eliminate the problem.

Example 3¶

In this example, we can see how a tooltip might be experienced by a user who is relying 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¶

Discover all items on the page that show additional information when you hover over them with the mouse or when you move focus to them using the keyboard's 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 hovered over or when focused with the keyboard's tab key. You don't need to consider elements that opens additional content only after a user action like clicking the mouse or pressing the Enter key.

Check that the elements you found meet all three requirements:

• Dismissible; The additional content can be dismissed without requiring any movement of the pointer or keyboard focus, for example, by pressing the 'Esc' key, unless the additional content is indicating an input error or does not obstruct other content.

• Hoverable; If the additional content can be triggered by hovering, then the pointer can be moved over the additional content without causing it to disappear.

• Persistent; The additional content stays visible unless the hover or focus trigger is removed, the user dismisses it, or its information becomes invalid.

If you found that all elements meet all three requirements stated above, you can mark the page as reviewed in Acquia Optimize.

If you found items that don't meet the three requirements above, you need to fix them on your website before they can be marked as reviewed in Acquia Optimize.

We recommend not having content open on keyboard focus or pointer hover. Instead, only open additional content when a user performs an action like clicking the mouse or pressing the enter button.

If this approach is not possible, then adjust the content and functionality to meet the three requirements mentioned above.

Steps to take to mark the issues as Reviewed in Acquia Optimize.

1. Click Accessibility (icon of a human with arms outstretched) on the menu bar. The Accessibility dashboard opens.

   

2. Click Pages with Failing Checks from the menu on the left side of the page.

   

3. Click Open Page Details (the page icon) on the same row as a page with failing checks. 

   

4. On the list of checks, find the check, “Additional content that appears and disappears in coordination with keyboard focus or pointer hover does not obstruct operation.” (You can use ctrl+F or the Search feature to assist with this.) 

5. Click the Pages button on the same row as the check to view a list of the pages where this issue is found.

6. Review each occurrence of the issue. When you have reviewed and/or repaired the issue, click Reviewed to mark it as reviewed.

   

7. Review the check for every page where the issue appears on your site (recommended). To do this, continue with the following steps:

8. Click Open FastTrack for this HTML Snippet (the highway icon).

   

9. Find “Additional content that appears and disappears in coordination with keyboard focus or pointer hover does not obstruct operation” on the list of checks.

10. Click Action and select Review on the same row as the check.

    

11. Type a justification (optional).

12. Click OK.

    

13. In some cases, you may need to edit it from your CMS.

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