Content on Hover or Focus
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the additional content is dismissible, hoverable, and persistent.
What it means
Additional content that appears and disappears in coordination with keyboard focus or pointer hover often leads to accessibility issues. Reasons for such issues include: Examples of such interactions can include custom tooltips, sub-menus and other non-modal popups which display on hover and focus. The intent of this success criterion is to ensure that authors who cause additional content to appear and disappear in this manner must design the interaction in such a way that users can: There are usually more predictable and accessible means of adding content to the page, which authors are recommended to employ. If an author does choose to make additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met: Each of these is discussed in a separate section.
Failing example
/* Fails: tooltip disappears the moment pointer moves off trigger */
.trigger:hover .tooltip { display: block; }
/* Moving to read the tooltip causes hover to leave trigger */How to fix it
/* Pass: tooltip stays visible when pointer moves onto it */
.trigger:hover .tooltip,
.tooltip:hover {
display: block;
}
/* Also add pointer-events:none only when tooltip must not
intercept clicks — remove it here since it must be hoverable */How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →