Crafting inclusive tooltips

Today, we’re diving into the world of tooltips. Think of them as little helpers that show up when you need them. They give you quick info or explanations without making your screen too crowded. They’re super handy for explaining those tiny icons or giving extra tips without bombarding you with tons of text. They make websites easier to use for everyone, especially those who might need a bit more guidance.

Now, let’s get into making tooltips inclusive and easy to access!

Make your tooltips keyboard accessible

Imagine visiting a site where important info only shows up when you hover your mouse. Not cool! Some folks can’t use a mouse or might find it tricky to move it around.

It’s important to make tooltips accessible through the keyboard (via the TAB key). This way, everyone, no matter how they browse, can easily get that extra helpful info. It’s like making sure everyone gets a fair shot at the info without any trouble.

Make sure your tooltip stands out when selected

Like all the clickable things, your tooltips need to show they’re selected. Adding a focus state to the thing that triggers your tooltip helps folks using a keyboard know which thing they’re on. Oh, and remember, the contrast between the focus border and the background behind your tooltip needs to be 3:1.

Identify your tooltip information

Let your visitors know the information they’re getting a tooltip by adding role="tooltip".

<span role="tooltip" class="tooltip-copy">{Your tooltip information}</span>

Connect them

Now connect the element that gets focused with its matching tooltip info using aria-labelledby on the focusable element and id on the tooltip info. The aria-labelledby identifier needs to match the id of its associated tooltip information.

<button aria-labelledby="tip1" class="tooltip-element">
    <span role="tooltip" class="tooltip-copy" id="tip1">{Your tooltip information}</span>
</button>

Tooltip icons

Some tooltips have icons! Here’s how you’d include an svg icon (similar to the in this blog’s image above). Identify your icon is an image by using a role.

<button aria-labelledby="tip1" class="tooltip-element">
    <span role="tooltip" class="tooltip-copy" id="tip1">{Your tooltip information}</span>
    <svg role="img" class="icon" viewBox="0 0 10 10">
        <path ...></path>
    </svg>
</button>

Notifications

Another common tooltip is the notification tooltip. Here’s an example of what that code would look like:

<button class="notifications" aria-labelledby="notifications-count notifications-label">
    <svg role="img" class="notifications-icon" viewBox="0 0 20 20">
        <path ...></path>
    </svg>
    <span id="notifications-count">{dynamic number of notifications}</span>
</button>
<div role="tooltip" id="notifications-label">Notifications</div>

Let users close tooltips using the ESC key

Users should be able to dismiss tooltips by hitting the ESC key.

Don’t forget!

💡 If your website has different languages, make sure your tooltips are translated too!

Conclusion

Making inclusive tooltips is a small step toward a more user-friendly website. Let’s create tooltips that everyone can easily use. Happy coding!