# ARIA tooltips must have an accessible name.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/labels-and-names/aria-tooltip-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Elements with `role="tooltip"` must have an accessible name. Without one, assistive technologies like screen readers cannot announce the tooltip's content to users, which defeats the purpose of the tooltip entirely. A tooltip that appears visually but remains silent to a screen reader creates an information gap for users who rely on assistive technology.

Tooltips typically provide supplementary descriptions or labels, such as explaining what a button does or giving more detail about an icon. When a tooltip lacks an accessible name, a screen reader user who triggers it (usually by focusing on or hovering over the associated element) gets no information from it. The tooltip might as well not exist for that user.

This rule relates to WCAG success criterion 4.1.2 (Name, Role, Value) at Level A. This criterion requires that all user interface components have a name that can be programmatically determined. Since a `role="tooltip"` element is recognized by assistive technologies as a distinct component, it must expose a name through the accessibility tree.

## How to fix it

In most cases, the tooltip's own text content is its accessible name. If the tooltip contains visible text, it already satisfies this requirement. The issue arises when a tooltip is empty, contains only non-text content (like an icon or image without alt text), or has its text content somehow obscured from the accessibility tree.

To fix a tooltip that lacks an accessible name:

1. Make sure the tooltip element contains descriptive text content. This is the simplest and most common approach.
2. If the tooltip cannot contain visible text for some reason, add an `aria-label` attribute with a descriptive string.
3. If the tooltip's name is provided by another element, use `aria-labelledby` to reference that element's `id`.

Also make sure the tooltip is properly associated with its triggering element using `aria-describedby` so that screen readers announce the tooltip content when the trigger receives focus.

## Examples

### Tooltip with no accessible name

This tooltip has no text content and no `aria-label`, so it has no accessible name:

```html
<button aria-describedby="tip1">Settings</button>
<div role="tooltip" id="tip1"></div>
```

### Tooltip with text content (fixed)

Adding descriptive text inside the tooltip gives it an accessible name:

```html
<button aria-describedby="tip1">Settings</button>
<div role="tooltip" id="tip1">Open application settings</div>
```

### Tooltip with only an image and no alt text

Here, the tooltip contains an image but no text alternative, so it still has no accessible name:

```html
<button aria-describedby="tip2">Status</button>
<div role="tooltip" id="tip2">
  <img src="info-icon.svg">
</div>
```

### Tooltip with an image fixed using `aria-label`

Adding `aria-label` to the tooltip provides an accessible name even when there is no visible text:

```html
<button aria-describedby="tip2">Status</button>
<div role="tooltip" id="tip2" aria-label="Connection is active">
  <img src="info-icon.svg" alt="">
</div>
```

### Tooltip with mixed content (correct)

A tooltip that contains readable text content already has an accessible name derived from that text:

```html
<button aria-describedby="tip3">
  <img src="save-icon.svg" alt="Save">
</button>
<div role="tooltip" id="tip3">Save your current progress</div>
```