Understanding Success Criterion 1.4.13: Content on Hover or Focus

Understanding Success Criterion 1.4.13 Content on Hover or Focus

Ensure that any additional content that appears and disappears on hover or focus is dismissible, hoverable, and persistent. 

Official Requirements

Success Criterion 1.4.13 Content on Hover or Focus (Level AA): 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.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.

Custom tooltips, sub-menus, and other nonmodal popups that display on hover and focus are examples of additional content covered by this criterion.

Why is it required?

When additional content is activated by keyboard focus or pointer hover, it becomes an accessibility issue. This is because the content may interfere with the user’s ability to do a task or the user may not know that new content has appeared or may not have intended to trigger the interaction. Therefore, there should be a way to dismiss or hover on the additional content or users are provided more time to perceive the content. 

How do we fix it?

  • Provide a way to close or exit the additional content without moving the pointer away from the trigger. (For example: By pressing the escape key)
  • Ensure that additional content stays visible for a long period of time and doesn’t automatically close after a time
  • Provide a way to hover on the additional content without its disappearance
  • ARIA: Using role=”tooltip” (Potential future technique)
  • CSS: Using hover and focus pseudo-classes (Potential future technique)

Are there any exceptions?

The success criterion exempts additional content that is controlled by user agents such as browsers but not modified by the author (For example: Browser tooltips that are created through the HTML title attribute)

  • When the additional content is used to indicate input errors
  • When the additional content does not obscure or conceal other content

Mistakes to avoid

Additional content activated on pointer hover can not be hovered on by users.

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media

Facebook
Twitter
LinkedIn
Email
Pinterest
Reddit
WhatsApp

Related Blogs

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content