For users with motor or visual impairments, interacting with this kind of content can be frustrating, if not impossible.
Content on Hover or Focus ensures that additional content triggered by hovering or focusing is accessible, easy to control, and doesn’t interfere with the user’s experience.
Who this impacts
- People with motor impairments: They need to control content that appears on hover without the risk of losing it or being unable to dismiss it.
- People using screen readers: Content that appears on focus must remain visible long enough for users to interact with it using assistive technology.
- Keyboard-only users: Keyboard navigation should be able to trigger hover or focus content without relying on a mouse.
- Everyone: Clear control over hover or focus-triggered content makes the web experience smoother and less frustrating for all users.
How to meet Content on Hover or Focus
- Make content dismissable: Ensure that users can dismiss content that appears on hover or focus by clicking outside it, pressing the Esc key, or using a clear close button.
- Ensure content is hoverable: Allow users to move their mouse over the hover-triggered content itself, so it remains visible while they interact with it.
- Keep content persistent: Content triggered by hover or focus should stay visible as long as the user needs it. The content should remain until the user moves away or explicitly dismisses it. Don’t force the content to disappear automatically.
Practical example
Catbook uses hover-triggered tooltips to explain features. Users can hover over the tooltip to read the entire explanation and dismiss it when they are done by pressing the Esc key or clicking outside the tooltip.
Exceptions
Content that is part of the essential function of a page, such as brief error messages or notifications, may not need to meet the full criteria of this guideline.
Top tips
- Test across devices: Ensure your content on hover or focus works smoothly across desktop and mobile, with both mouse and keyboard interactions.
- Prioritize control: Always give users the power to dismiss content and keep it visible long enough for meaningful interaction.
- Ensure focus works for all users: Test the experience for users who navigate with screen readers, keyboards, and assistive technologies to ensure hover and focus work as expected.