Creating Accessible Hover States and Tooltips
Chances are, not all content on your website is immediately displayed to users. To provide a dynamic experience, most sites disclose additional information to visitors when they hover over or focus on certain interactive elements. But if this additional content is inaccessible, users with disabilities may miss out on important insight, or encounter barriers to navigating a site effectively. Thankfully, the success criterion WCAG 1.4.13 Content on Hover or Focus (Level AA) provides direction for avoiding these challenges.
In this article, we’ll unpack WCAG 1.4.13 and its importance for web accessibility. We’ll also explain how website owners can successfully implement this success criterion to improve usability for people with disabilities.
What is WCAG 1.4.13 content on hover or focus (level AA)?
WCAG 1.4.13 Content on Hover or Focus (Level AA) is a success criterion in version 2.1 and 2.2 of the Web Content Accessibility Guidelines (WCAG). It specifically addresses the behavior of content triggered by hover or keyboard focus, such as tooltips, pop-ups, and submenus.
In essence, the criterion states that, if hovering over or focusing on an element triggers additional content (e.g., a tooltip or pop-up), users must be able to interact with that content without it disappearing unexpectedly.
Because meeting WCAG 1.4.13 helps ensure that all users can perceive and identify information, this criterion falls under Principle 1: Perceivable and Guideline 1.4: Distinguishable of WCAG.
The three requirements for accessible content on hover or focus
WCAG 1.4.13 explains that content that is triggered by hover or focus must meet three key requirements to be accessible: It must be dismissible, hoverable, and persistent.
Let’s unpack what each of these requirements means:
- Dismissible content: After a user triggers additional content, they must be able to dismiss this content without moving their mouse or changing focus. For example, users should have the option to close a pop-up by pressing the ESC key, rather than having to navigate to an “x” icon.
- Hoverable content: If hovering over an element with the pointer reveals content, users need the ability to move the pointer over this content without it disappearing. That means a tooltip shouldn’t suddenly close when a user scrolls over the text displayed to read it more closely.
- Persistent content: Any additional content that is triggered through hover or focus must stay visible to users unless they dismiss it (e.g., press the ESC key) or remove the hover or focus trigger (e.g., move the pointer out of its frame), or the information ceases to be valid (e.g., it times out).
Why is the accessibility of hover- and focus-triggered content important?
When they’re first approaching web accessibility, it’s common for website owners to prioritize the primary content of a web page, and neglect to consider elements that only appear when users hover over or focus on them. However, reviewing the behavior of these elements is critical to providing an inclusive and legally compliant user experience. Here are a few ways conforming to WCAG 1.4.13 benefits users and organizations.
- It supports keyboard and screen reader users: By ensuring additional content is dismissible with the keyboard and persistent in a focus state, website owners improve accessibility for individuals who navigate using the keyboard only and / or screen readers.
- It helps prevent user frustration: Unexpectedly disappearing content can frustrate users, especially those with cognitive or motor disabilities who may need more time to interact with it.
- It enhances usability for all: When all content on your site, including that triggered by hover or focus, is easy to interact with, all users enjoy a more straightforward experience—regardless of disability.
- It supports compliance with accessibility laws: Conforming to WCAG 2.1 or 2.2 Level AA criteria, including WCAG 1.4.13, is a best practice for compliance with the Americans with Disabilities Act (ADA) and other U.S. and international accessibility laws.
How to implement WCAG 1.4.13
If you’re ready to improve the accessibility of hover- and focus-triggered content on your site, start with the following best practices.
- Design accessible tooltips: Ensure any tooltips on your site are dismissible, hoverable, and persistent. Use ARIA attributes, when appropriate, to enhance screen reader compatibility. For example: <button aria-describedby=”tooltip”>Hover me</button> <div id=”tooltip” role=”tooltip”>This is a tooltip!</div>
- Make pop-ups keyboard-accessible: Make sure that pop-ups activated on focus can be closed with the ESC key and moved using the keyboard. Use ARIA roles like dialog for modal pop-ups.
- Test hover and focus states: Try interacting with elements using both a mouse and a keyboard to validate that hover and focus states work as intended.
- Avoid auto-dismissing content: Check that additional content does not automatically disappear, unless the information is no longer valid. This is particularly important for hover- and focus-triggered content that provides instructions, which must remain visible long enough for users to read it.
Common mistakes to avoid
Even well-intentioned teams can make mistakes when implementing WCAG 1.4.13. As you work to improve the accessibility of tooltips, pop-ups, and other additional content on your site, avoid the following pitfalls:
- Non-dismissible content: When users don’t have a mechanism for closing additional content, they may be unable to interact with the rest of your site.
- Disappearing content: If content immediately disappears when users move their pointer or change focus, it can be difficult for users to read or engage with this information.
- Lack of keyboard support: Additional content that cannot be dismissed or manipulated using the keyboard may be inaccessible to individuals who navigate with the keyboard only.
Build a fully functional website for all users
Conforming with WCAG 1.4.13 Content on Hover or Focus (Level AA) is crucial for ensuring all users, regardless of disability, can benefit from the full functionality of your website. By validating that content triggered by hover or focus is dismissible, hoverable, and persistent, you can ultimately create a more streamlined and inclusive digital experience.
Remember, digital accessibility is not just about compliance—it’s about building a web that works for everyone. By implementing WCAG 1.4.13, you take a significant step toward achieving that goal.
