Hover-Triggered and Focus-Triggered Content

One of the many interaction patterns that we can take for granted is the ability to trigger the hiding or showing of content on pointer hovers, such as with tooltips or spoiler-covered text or images. This comes up most often with data visualizations but can also often be seen with menu items, additional help dialogs, and more. There are some tips and tricks we can use to make elements like tooltips a little better. However, ultimately, hover-triggered content is just not an accessible pattern. Our best bet is to use a different approach or provide an alternate source, in addition to the hover-triggered content, to communicate the same information.

Accessibility challenges in hover-triggered content

There are several reasons why hover-triggered content isn’t ideal for accessibility. Some of these can be mitigated with workarounds or adjustments, but others require an entirely different approach to solve.

Limitations of hover-dependent interactions

The most obvious concern here is, of course, that not everyone will be using a mouse, and without a mouse, hover-based interactions become effectively impossible to trigger. This means that not only will this content be inaccessible for people using keyboard navigation or alternative navigation inputs, but it will also be inaccessible for people on touch-based devices (which are also incapable of hovering).

Even for users who do use a mouse, though, ...