Content on Hover or Focus
Summary:
WCAG 1.4.13, "Content on Hover or Focus," addresses the accessibility of additional content that appears when a user hovers over or focuses on an element. This criterion ensures that such content is easily accessible and dismissible, particularly for users with motor control issues or those who rely on keyboard navigation.
What:
This guideline stipulates that any content appearing on hover or focus must be dismissible without moving the pointer or keyboard focus, hoverable so the additional content doesn't disappear when the user tries to reach it, and persistent enough to remain visible until the user dismisses it or moves the pointer or focus away.
Why:
Additional content that appears on hover or focus can be problematic if it's not easily manageable. For instance, users with limited motor control might struggle to keep their pointer steady, and keyboard-only users need a reliable way to dismiss such content. This guideline ensures these users have full access to all content without frustration.
Examples and Scenarios:
- Dropdown Menus: When users hover over a menu item and a submenu appears, they should be able to move their mouse to the submenu without it disappearing.
- Tooltip Information: Tooltips that appear when hovering over an icon or text should remain visible long enough to be read and should be dismissible.
- Interactive Pop-ups: Pop-ups that appear on focus, like for form validation, should be easy to dismiss with the keyboard and not obstruct or disappear unexpectedly.
How to Comply:
- Websites: Ensure any hover or focus-triggered content is accessible via keyboard and doesn't disappear when trying to interact with it. Use CSS and JavaScript to manage the behavior of such content.
- Mobile Apps: Adapt hover and focus content for touch interfaces, ensuring it's dismissible and remains accessible.
- Software Applications: Implement hover and focus features with considerations for accessibility, such as easy dismissal and stable visibility.
Exceptions:
- Complex Interactions: In cases where the additional content is part of a complex interaction and its functionality requires specific behavior, some aspects of this guideline might be challenging to fully implement.
- Mouse-Dependent Controls: In cases where the interaction is inherently mouse-dependent, such as certain complex graphical interfaces or controls where keyboard navigation may not be feasible, full compliance may not be possible. Even in these instances, providing alternative methods for accessing the content for keyboard or assistive technology users is recommended.