Skip to main content

The WCAG Primer is intended for use by the UK cross government accessibility community. Complete our survey here.

1.4.13 Content on Hover or Focus (AA)

Understanding 1.4.13 Content on Hover or Focus (AA)

This is for mobile or tablet devices - where pointer hover or keyboard focus triggers additional content to become visible and then hidden (like pop-ups or other options) you need make sure:

  • The ‘extra’ content can be dismissed without moving focus, unless it does not obscure other page content.
  • If the user needs to hover or interact with the extra content, then the pointer can move to it and use it, without it disappearing.
  • The content stays visible until focus is moved, or the user dismissed it, or it is no longer useful.

Why is this a problem?

  • For disabled users on your website who may accidentally trigger content or are using keyboards only or mobile devices it is frustrating when pop up content either doesn’t ‘stay’ on the screen if they need to use it or won’t go away without loosing their place.

  • This also helps sight impaired users who don’t want to zoom in/out a lot to see if content is still active on the page (or not). It also gives all user enough time to understand the ‘extra’ content that appears and what they need to do.

Requirements / What to do?

This has several approaches depending on the control. For content to be dismissed:

  • Position the additional content so that it does not obscure any other content including the trigger, with the exception of white space and purely decorative content, such as a background graphic which provides no information.
  • Provide a way to easily dismiss the additional content, such as by pressing Escape or selecting a close button.

For content to be hoverable:

  • Manage focus and move the mouse pointer directly from the trigger onto the new content.

For content to be persistent:

Once it appears, the content should remain visible until:

  • The user removes hover or focus from the trigger and the extra content;
  • The user dismisses the extra content.
  • The information conveyed by the additional content becomes unnecessary.

Common mistakes

Resources

  • TBD