Content on hover or focus ensures that temporary content triggered by pointer hover or keyboard focus remains perceivable, usable, and controllable.
This includes tooltips, dropdown menus, sub-menus, and non-modal popups that appear when users hover over or focus on an element.
When this content appears unexpectedly, disappears too quickly, or blocks other information, many users are unable to read or interact with it. For some users, it may not be noticed at all.
This criterion exists because users cannot rely on precision, speed, or perfect vision to keep temporary content visible.
Key terms
Focus
The element currently active for keyboard users. Focus moves using keys like Tab and Shift+Tab.
Additional content
Any content that appears because of hover or focus. It is not the trigger itself.
WCAG Success Criterion
1.4.13 Content on Hover or Focus (Level AA)
When pointer hover or keyboard focus causes additional content to appear and then disappear, all of the following must be true:
Dismissible
Users can dismiss the additional content without moving pointer hover or keyboard focus, unless:
- The content communicates an input error, or
- The content does not obscure or replace other content.
Hoverable
If pointer hover triggers the content, the pointer can move over the additional content without causing it to disappear.
Persistent
The content remains visible until:
- the user removes hover or focus,
- the user dismisses it, or
- The information is no longer valid.
Exception
If the appearance and behaviour are entirely controlled by the user agent and not modified by the author, this criterion does not apply.
Who This Helps
This criterion primarily supports users who:
- Have low vision and use magnification
- Have reduced pointer accuracy
- Use large cursors or alternative pointing devices
- Navigate using a keyboard
- Have cognitive or attention-related disabilities
Concrete example
Imagine a user zoomed to 400%, trying to read a tooltip. As soon as they move the pointer slightly to pan the screen, the tooltip disappears. The content technically exists, but is unusable.
What Counts as “Additional Content”
Additional content is not the trigger itself, but content that appears because of hover or focus.
Common examples include:
- Custom tooltips
- Dropdown or flyout menus
- Sub-navigation panels
- Non-modal popups
- Contextual help bubbles
This criterion does not apply to:
- Content that is always present
- Elements revealed on focus that replace hidden content (such as skip links)
- Browser-default tooltips created by the title attribute
- Modal dialogues (handled by other success criteria)
Simple Decision Test
Ask the following:
- Does hover or focus cause extra content to appear?
- Could that content block other information or controls?
- Could it disappear before the user finishes reading or interacting with it?
If yes, the content must be dismissible, hoverable, and persistent.
Dismissible: Users Must Be Able to Clear It
Additional content must not trap users or block their view.
This is especially important for users who:
- zoom into a small portion of the screen
- pan the viewport using mouse movement
- navigate using only a keyboard
Ways to Meet This Requirement
You can satisfy this condition by:
- ensuring the content does not obscure other meaningful content, or
- providing a clear dismissal mechanism, such as:
- pressing the Escape key
- activating a close control
For small triggers, it’s best to do both.
Exception
Error messages related to form inputs may persist until corrected.
Hoverable: Users Must Be Able to Move Onto It
If hover triggers the content, users must be able to move their pointer onto the new content without it disappearing.
This matters because:
- Magnified views require scrolling or panning
- Large cursors can obscure small trigger areas
- Users cannot rely on steady pointer positioning
If users must “balance” the pointer on the trigger to keep the content visible, the design fails.
Persistent: Give Users Enough Time
Once the content appears, it must stay visible long enough for users to:
- notice it
- adjust magnification
- move focus or pointer
- read or interact with it
Auto-disappearing content that fades out after a short delay often fails this requirement.
What This Means Technically
From a technical perspective, hover-triggered content must also be available when an element receives keyboard focus. Users who navigate with a keyboard should receive the same information as users who hover with a pointer. In addition, users must be able to dismiss the content using the keyboard, most commonly by pressing the Escape key, without having to move focus away from the trigger.
The content should remain in the page structure while it is visible and should not be removed immediately when the hover ends. Designs that rely only on CSS :hover without an equivalent focus behaviour often fail this criterion. Timers that automatically hide content should be avoided, as they remove control from the user. Hover can be supported as an enhancement, but keyboard access must always be available.
Important Clarifications
This success criterion applies only to behaviour controlled by the author. Content that appears or behaves in a specific way because of the browser or operating system, such as default browser tooltips, is exempt. However, once authors customise or replace that behaviour, they become responsible for meeting the requirement.
Hover-triggered content must always be available through keyboard focus as well. Modal dialogs are not covered by this criterion and must follow separate focus management rules. The key expectation is consistency and control: if content appears because of hover or focus, users must be able to access, interact with, and dismiss it reliably, regardless of how they navigate.
Common Failures
- Tooltips that disappear as soon as the pointer moves
- Hover content that blocks nearby controls with no way to dismiss it
- Popups that vanish after a short delay
- Content that appears far from the trigger and is easy to miss
- Hover-only interactions with no keyboard equivalent
Common misconception:
“If users can hover more carefully, it’s fine.”
This is false. Accessibility does not depend on precision or timing.
Rule Description
Any additional content that appears on hover or focus must be controllable by the user. Users must be able to perceive it, interact with it, and dismiss it without disruption.
Wrapping Up
Content on hover or focus should support users, not surprise them. If temporary content appears, users must have time, space, and control to deal with it. If users might miss it, struggle to read it, or fight to dismiss it, the design fails this criterion.
