The two ARIA attributes every tooltip needs

Tooltips are everywhere, and they’re a helpful addition to your interface, providing context without cluttering your design.

But here’s the problem: without proper ARIA implementation, screen reader users never get that helpful information. The tooltip appears visually, but users won’t know it’s connected to that button or icon.

Thankfully, fixing this issue comes down to two essential ARIA attributes.

1. Add role="tooltip" to the tooltip container itself. This tells assistive technology what type of element it’s dealing with.
2. Connect the trigger element to the tooltip using aria-describedby. This attribute points to the tooltip’s ID, creating the relationship that screen readers need.

Here’s what it looks like in practice:

<button aria-describedby="save-tooltip">
  Save
</button>
<div role="tooltip" id="save-tooltip">
  Saves your changes to the server
</div>

When a screen reader user focuses on that button, they’ll hear “Save, button” followed by “Saves your changes to the server.” The supplemental information gets announced automatically.

One important distinction: use aria-describedby when the tooltip provides additional context. If the tooltip contains the element’s primary label (like an icon-only button), use aria-labelledby instead.