Loading...
Loading content...
Loading content...
Popups (like tooltips) must be dismissible, hoverable, and persistent.
Why it matters: Users need to be able to read hover content without it disappearing and dismiss it if it obscures other content.
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: (Level AA) Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content; Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing; Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
What This Means: This success criterion requires that when hover or focus triggers additional content (like tooltips, popovers, or dropdowns), the content must be: (1) Dismissible - users can close it without moving the pointer or focus, (2) Hoverable - pointer users can move the mouse over the additional content without it disappearing, and (3) Persistent - the content stays visible until dismissed, focus moves away, or the information is no longer valid.
Why It's Important: Users need time to read and interact with hover/focus content. If content disappears immediately when the mouse moves, users cannot read it. Keyboard users need a way to dismiss content that might obscure other content. Users with motor disabilities may have difficulty keeping the pointer in a precise position, so content must be persistent and hoverable.
Implement tooltips and popovers that remain visible until explicitly dismissed or focus moves away. Provide a close button or Escape key to dismiss. Ensure the additional content area is large enough to move the pointer over without triggering dismissal. Test with both mouse and keyboard interaction to ensure all users can access and dismiss the content.
This criterion ensures that users with low vision can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that keyboard users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with motor disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
A tooltip disappears immediately when the mouse moves away, making it impossible to read.
<button onmouseenter="showTooltip()" onmouseleave="hideTooltip()">
Hover me
</button>A tooltip that stays visible until dismissed or focus moves away.
<button aria-describedby="tooltip" onfocus="showTooltip()" onblur="hideTooltip()">
Hover me
<span id="tooltip" role="tooltip">Helpful information</span>
</button>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.13 Content on Hover or Focus are met. Check off items as you complete them.
Note: These are official W3C resources for 1.4.13. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.13 Content on Hover or Focus correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.4 Distinguishable