A website with 2 levels of menus open
Image description: A website with a logo on the left and 4 navigational items on the right: exhibits, collection, visit us, and about. The exhibit item is highlighted in green, with a menu below containing 2 items - “current, previous” and the menu expanding from “previous” containing 3 items - “life of bananas, beauty in berries, strawberry tall.” A mouse cursor is hovering over "strawberry tall."

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

If content appears and disappears on hover or focus, this can feel frustrating, unpredictable, and disruptive. Use best practices to make hover and focus more predictable and less likely to cause errors. This is especially accessible for people with physical and visual disabilities.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

As users interact with a website/app, it’s important that they feel in control of what they’re doing. If content appears and disappears on hover or focus (such as menus, pop-up windows, or tooltips) this could feel unpredictable and disruptive.

Use hover and focus best practices as recommended by WCAG in order to make content feel more predictable and controllable.

This references WCAG criterion 1.4.13 Content on Hover or Focus (Level AA).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

How to Implement This

WCAG recommends the following techniques to make hover and focus more usable.

  • Dismissible
  • Hoverable
  • Persistent


Dismissible

Dismissible means that there should be a way to dismiss the new content without moving hover or changing focus. This is because the user might be in the middle of doing something, and we want to avoid disrupting them.

The easiest way to implement this is to use the “escape” key control to dismiss the content.

Hoverable

Hoverable means that the new content should remain visible if the user hovers over it.

Sometimes, content becomes visible when the user hovers over the trigger element (meaning the element that makes new content visible), however when they hover over the new content, it disappears because hover is no longer on the trigger element.

If the new content is constantly disappearing, this can be very frustrating, especially if it is important to what the user is doing. Therefore, the new content must remain visible, whether the hover is over the trigger element or the new content.


Example of accessible hover interaction (content stays visible) vs. inaccessible (content disappears).
Image description: Comparison of an accessible and inaccessible version of hover. In the accessible version, the mouse hovers over a menu button to open a list of 3 important things. When the mouse hovers over the list, the menu remains visible. In the inaccessible version, the list disappears when the mouse hovers over it.

Persistent

According to Knowbility, this rule combines the previous two. The content must remain visible until:

  • the user dismisses it,
  • the user moves the mouse off of it or the trigger,
  • or the content no longer contains important information.

How to Test This

Manual Test
Semi-Automated Test
Automated Test

Move your mouse around and tab through keyboard focus to see if any elements appear and disappear on hover or focus. Test to make sure the content is dismissible, hoverable, and persistent.

  • For focus, tab through all the elements. For hover, move your computer mouse around.
  • Make note of any content that appears or disappears on hover and focus.
  • If content appears, make sure there is a way to dismiss it and that it remains visible if you hover over it.


Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.