Our Blog

Thoughts, news, insights and sometimes just random musings.
1 minute reading time (290 words)

WCAG: 1.4.13 Content on Hover or Focus

content-hover-focus

You've likely noticed that when you hover your cursor over buttons and other components online, sometimes a little box appears providing more information about that item. Take, for example, this screenshot taken from a Google Doc:

[Source: Google]

Accessibility Concerns and Solutions

The additional information provided by this mechanism can often prove very helpful when operating a website. It can, however, pose some accessibility issues. A user may accidentally trigger the interaction, the information popping up may get in the user's way and prevent them from accomplishing a task, or the user may not even be aware the additional content has appeared.

For these reasons, if pointer hover or keyboard focus on an item causes additional information to appear, then the following conditions must be met:

  • Dismissible. There's a mechanism in place allowing users to dismiss the additional information without removing keyboard focus or pointer hover, unless the additional information is alerting users to an error or does not block other content on the site.
  • Hoverable. The user can move the pointer from the item that triggered the additional information to the additional information itself. Users may have a larger pointer or might magnify their screen, so such a consideration will help ensure their cursor doesn't block the additional content.

Persistent. The additional content stays visible until the user dismisses it, removes pointer hover or keyboard focus, or if the information is no longer valid.

One More Thing

It's worth noting that this rule only applies to content set by you, the author. Sometimes, additional information may appear as a result of the browser or user agent. Since you wouldn't have any control over that, those considerations don't apply to you.