How to Create Accessible Tooltips With HTML & CSS

Creating accessible tooltips is essential for enhancing user experience on your website. Tooltips provide additional context to users when they hover over or focus on certain elements. In this article, we will explore how to create accessible tooltips using HTML and CSS, ensuring that all users, including those with disabilities, can benefit from this feature.

Step 1: Basic HTML Structure

To start, you'll want to set up a simple HTML structure. Tooltips are often associated with elements like buttons or text icons. Here's an example of a button with an aria-describedby attribute that references a tooltip:

<button aria-describedby="tooltip1">Hover over me</button>
<div role="tooltip" id="tooltip1" class="tooltip">This is a tooltip!</div>

In this example, the button has an aria-describedby attribute linking it to the corresponding tooltip. This is crucial for screen readers to identify the additional information available when the user focuses on or hovers over the button.

Step 2: Styling the Tooltip with CSS

Next, let's style the tooltip using CSS. The tooltip should be hidden by default and only displayed when the button is hovered or focused on. Here’s how you can do that:

.tooltip {
    visibility: hidden;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
}
button:hover + .tooltip,
button:focus + .tooltip {
    visibility: visible;
}

In this CSS snippet, we set the tooltip’s visibility to hidden initially. Then, we use the adjacent sibling combinator to make the tooltip visible whenever the button is hovered over or focused on. Customize the background color, padding, and other styles to match your website's design.

Step 3: Ensuring Keyboard Accessibility

While hover effects are useful, it’s important to ensure that tooltips are accessible to keyboard users. The example provided above already meets this requirement, as the tooltip appears on focus. You can further enhance accessibility by providing a keyboard-triggered tooltip using JavaScript, like so:

document.querySelector('button').addEventListener('focus', function() {
    document.getElementById('tooltip1').style.visibility = 'visible';
});
document.querySelector('button').addEventListener('blur', function() {
    document.getElementById('tooltip1').style.visibility = 'hidden';
});

This script will ensure that when the button gains focus via keyboard input, the tooltip will be displayed and hidden when focus is lost. This makes the tooltip accessible for users relying on keyboard navigation.

Step 4: Testing for Accessibility

After implementing your tooltips, it’s essential to test them for accessibility. Use screen readers to verify that they read out the tooltip content when the button is focused. Additionally, make sure that users can navigate to the button and tooltip using only their keyboard.

Consider using accessibility testing tools, such as WAVE or Axe, to identify any potential issues that may impede usability for people with disabilities.

Conclusion

By following these steps, you can create accessible tooltips using HTML and CSS that improve the overall user experience on your website. Always keep in mind the principles of accessibility as you design and implement features, ensuring that your site is usable for everyone.

How to Create Accessible Tooltips With HTML & CSS