WCAG (Level AA) SC 1.4.13 Content on Hover or Focus (W3.org)
Issue description
WCAG 1.4.13, “Content on Hover or Focus” ensures that content that is currently selected acts the way it should, such as using the escape key to close a pop-up. This addresses the challenges that hover or focus states can create for people with certain disabilities. It aims to ensure that content that appears or disappears on mouse hover or keyboard focus is accessible and usable for everyone.
Many websites use hover or focus states to reveal additional content or functionality. For example:
- Tooltips: Displaying tooltips with extra information when the user hovers over an element.
- Hidden menus: Showing dropdown menus when the user hovers over a navigation item.
- Focus indicators: Changing the appearance of an element when it receives keyboard focus.
WCAG requirements:
This guideline requires that content that appears on hover or focus must meet the following criteria:
- Dismissable: Users should be able to dismiss the content without moving the pointer or keyboard focus (e.g., by pressing the Escape key).
- Hoverable: If the content appears on hover, it should also be accessible by hovering over the content itself.
- Persistent: The content should remain visible until the user dismisses it, moves the pointer or keyboard focus, or the content is no longer relevant.
Essentially, WCAG (Level AA) SC 1.4.13 Content on Hover or Focus ensures that content that appears on hover or focus is accessible and usable for everyone, regardless of their abilities or input methods. It promotes inclusivity and prevents situations where users might miss important information or functionality.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.4.13, “Content on Hover or Focus” involves ensuring that any content that appears on mouse hover or keyboard focus is accessible to everyone, including those who cannot use a mouse or have difficulty with dynamic content changes. Here’s how:
Make content persistent:
- Keep it visible: Ensure the content remains visible until the user actively dismisses it, moves the pointer or keyboard focus away, or the content is no longer relevant. Don’t make it disappear automatically after a short time.
Provide alternative access:
- Keyboard access: Ensure the content can be triggered with a keyboard interaction, such as pressing the Enter key or the spacebar when the element has focus.
- Focusable content: Make the revealed content itself focusable so that keyboard users can navigate to it and interact with it.
Dismissal methods:
- Escape key: Allow users to dismiss the content by pressing the Escape key.
- Clicking outside: Allow users to dismiss the content by clicking outside of the revealed content area.
- Clear close button: Provide a clearly visible close button within the revealed content that users can click to dismiss it.
Consider user needs:
- Time limits: Avoid setting short time limits for how long the content remains visible. Give users enough time to read and interact with it.
- Motion sensitivity: If the content appears with an animation or transition, provide a way for users to disable animations if they have motion sensitivities.
- Clear visual cues: Ensure the revealed content has clear visual cues to indicate its relationship to the triggering element (e.g., using arrows or visual connections).
Testing:
- Keyboard testing: Test all hover and focus interactions using only the keyboard to ensure they are accessible.
- Assistive technology testing: Test with screen readers to ensure the content is announced and navigable. Example: If you have a tooltip that appears on hover, you can:
- Make it persistent: Keep the tooltip visible until the user moves the mouse away or clicks outside of it.
- Add keyboard access: Make the tooltip appear when the user focuses on the element with the Tab key and presses Enter or Space.
- Include a close button: Add a close button to the tooltip that users can click to dismiss it.
By implementing these techniques, you can ensure that content that appears on hover or focus is accessible and usable for everyone, regardless of their abilities or input methods.
