Tips for Meeting WCAG 1.4.13: Content on Hover or Focus

The Web Content Accessibility Guidelines (WCAG) includes many success criteria addressing focus, which indicates which element the user is interacting with. 

That’s for a good reason: Appropriate use of focus is essential for delivering a consistent web experience to every user, regardless of the technology they use to access your website. 

WCAG 2.1 Success Criterion (SC) 1.4.13, “Content on Hover or Focus,” is intended to prevent an especially annoying set of accessibility barriers. In this article, we’ll discuss methods for meeting WCAG 2.1 SC 1.4.13 and explain how meeting this standard can benefit real-life users. 

Meeting WCAG Success Criterion 1.4.13 Content on Hover or Focus 

WCAG SC 1.4.13 requires content that appears on hover or keyboard focus to behave in an understandable and predictable way. This is mostly applicable to pop-ups, which can create a number of frustrating accessibility barriers:

• You hover over a word on a webpage, and a glossary pop-up appears. You can’t close the pop-up without moving your focus — and moving your focus prevents you from reading all of the content.
• You hover your pointer over a website’s header menu, and you’re presented with navigation links. When you try to hover over the navigation links, they disappear. 
• A tooltip pop-up appears when you hover over a link. As you’re reading the pop-up, it disappears suddenly.

WCAG SC 1.4.13 is intended to address these barriers by requiring content to be dismissable, hoverable, and persistent. 

Related: What You Need to Know About Visual Focus and Accessibility

WCAG’s Explanation of Success Criterion 1.4.13, “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 following are true:

• Dismissible: 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.

Exceptions for WCAG 2.1 SC 1.4.13, “Content on Hover or Focus”

The criterion contains an exception for situations where “the visual presentation of the additional content is controlled by the user agent and is not modified by the author.” 

This exception applies to custom modal dialogs, which are windows that disable access to the main content and require user interaction before access is restored. Modal dialogs can also create accessibility concerns, however. 

In modals, the keyboard focus must be managed properly to follow WCAG 2.1 SC 3.2.1, “On Focus" and WCAG 2.1 SC 2.4.7, “Focus Visible.” The modal dialog must also contain accurate HTML and WAI-ARIA markup to deliver correct information to screen readers and other assistive technologies. 

Related: What is Keyboard Accessibility?

Testing Pop-Up Content for Conformance with WCAG 2.1 SC 1.4.13

Pop-up content can be useful (for example, tooltip widgets and custom sub-menus). However, these components can also distract users or prevent them from browsing your website naturally — avoid using pop-ups unless you’re sure that they improve the user experience. 

Keep these tips in mind when reviewing content that only appears when triggered by mouse or keyboard focus: 

• The additional content should be accessible for keyboard users. If content only appears with pointer focus — not keyboard focus — it may fail WCAG 2.1 SC 2.1.1, “Keyboard.”
• Test content with a screen magnifier. Make sure the pop-up content remains visible as you hover over different parts of the additional content.
• Make sure you can exit the additional content with keyboard commands (the Esc key) or by activating the trigger in another way.
• Make sure that the content doesn’t automatically close after a certain period of time.
• To meet WCAG 2.1 SC 3.2.1, “On Focus,” make sure the new content doesn’t initiate a change of context.

For more guidance with WCAG conformance, send us a message or test your website with our free WCAG 2.1 Level AA compliance summary.