Accessible Tooltips

Tooltips are small floating boxes that appear near words, icons, or images and display short explanatory text on hover or keyboard focus. They can be a good way to provide additional information to users, but if they’re not made accessible, people with disabilities will be left out.

How to Make Accessible Tooltips

Here’s how to make tooltips on the websites you build accessible:

1. Tooltips must be able to be triggered by the keyboard alone. This means you must make the triggering element keyboard focusable if it usually can’t receive keyboard focus (a span, div, image, etc.). This can be done by adding tabindex=”0” to the triggering element.
2. The tooltip should close with the Escape key. Add JavaScript that closes the tooltip with the Escape key. It should also close if the mouse is moved away or a keyboard-only user tabs away from it.
3. The tooltip shouldn’t receive focus. The tooltip itself should not be keyboard-focusable, so don’t put links or other clickable elements in them.
4. The tooltip container has a WAI-ARIA role. Add role=”tooltip” to the element that serves as the tooltip container.
5. Connect the tooltip with its trigger. Add aria-describedby to the element that triggers the tooltip and have it reference the ID of the tooltip.

Want to see some examples of accessible tooltips? Check out this codepen example.

Should it really be a tooltip?

One thing worth asking yourself when building websites is, “Does this content truly belong in a tooltip?”

If content is really important, then it should be visible on the page without requiring a hover or focus action. Likewise, tooltips are supposed to be short: 2-4 words max, not multiple sentences or paragraphs.

Sometimes, the easiest way to make something accessible is to avoid the “fancy” or complex user interactions and go with a more straightforward design. Basic can be beautiful, so if a tooltip isn’t absolutely necessary, you might be able to provide a more accessible experience with less work by leaving them out.

Tooltips in WordPress Plugins

Tooltips are most commonly seen in WP-admin on settings pages and editor interfaces within WordPress, but they are occasionally built into the front end of WordPress sites. A common place to see tooltips on the front end of websites is in pricing tables, but beyond pricing tables, some plugins allow you to add tooltips to just about anything.

I searched “tooltips” in the WordPress plugin directory, and looked at a few of the top plugins.

CM Tooltip Glossary was keyboard but not screen reader accessible. See the CM Tooltip Glossary support forum thread.

Essential Add-ons for Elementor was worse – it couldn’t be used with a screen reader or a keyboard at all. See the Essential Addons tooltip GitHub issue.

It turns out the third time’s the charm, because the third plugin I tested, Shortcodes Ultimate, did great! They add the trigger to focus order, add a focus outline even if the theme doesn’t do it, and properly connect the tooltip content with the trigger. See Shortcodes Ultimate’s tooltip example. (Just disregard the example they provided with a link in the tooltip.)

Are you using a different plugin to create tooltips? How does it measure up?