# ARIA tooltip nodes must have an accessible name

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

Tooltips are supplementary text elements that appear when a user hovers over or focuses on a control. They typically provide descriptions, labels, or additional context. When an element has `role="tooltip"`, assistive technologies recognize it as a tooltip and attempt to announce its name to the user.

If a tooltip lacks an accessible name, screen reader users hear something like "tooltip" with no accompanying description. This means they miss the very information the tooltip was designed to provide. Users affected include:

- **Blind users** who rely entirely on screen readers to access tooltip content.
- **Low vision users** who may use screen readers in combination with magnification and depend on announced text.
- **Mobility-impaired users** who navigate with keyboards or alternative input devices and rely on programmatic relationships to understand UI elements.

This rule relates to **WCAG Success Criterion 4.1.2: Name, Role, Value (Level A)**, which requires that all user interface components have a name that can be programmatically determined. It applies across WCAG 2.0, 2.1, and 2.2, as well as EN 301 549 (guideline 9.4.1.2). Since this is a Level A requirement, it represents the minimum baseline for accessibility compliance.

## How to Fix It

Ensure every element with `role="tooltip"` has a discernible accessible name through one of these methods:

1. **Inner text content** — Place readable text directly inside the tooltip element.
2. **`aria-label` attribute** — Set a non-empty `aria-label` with a clear description.
3. **`aria-labelledby` attribute** — Reference another element's `id` that contains visible, non-empty text.
4. **`title` attribute** — Provide a non-empty `title` on the tooltip element (though `aria-label` or inner text are generally preferred).

The accessible name should be concise and clearly describe the information the tooltip is meant to communicate.

## Examples

### Incorrect: Empty Tooltip with No Accessible Name

The tooltip has no text content and no naming attribute, so screen readers cannot announce anything meaningful.

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

### Incorrect: Empty `aria-label`

An empty `aria-label` does not provide an accessible name.

```html
<button aria-describedby="tip2">Save</button>
<div role="tooltip" id="tip2" aria-label=""></div>
```

### Incorrect: `aria-labelledby` Pointing to a Non-Existent or Empty Element

If the referenced element doesn't exist or has no text content, the tooltip has no accessible name.

```html
<button aria-describedby="tip3">Delete</button>
<div role="tooltip" id="tip3" aria-labelledby="nonexistent"></div>
```

```html
<button aria-describedby="tip4">Delete</button>
<div role="tooltip" id="tip4" aria-labelledby="empty-label"></div>
<div id="empty-label"></div>
```

### Correct: Tooltip with Inner Text

The simplest approach — place descriptive text directly inside the tooltip element.

```html
<button aria-describedby="tip5">Save</button>
<div role="tooltip" id="tip5">Save your current progress</div>
```

### Correct: Tooltip with `aria-label`

Use `aria-label` when the tooltip's visual content differs from what you want screen readers to announce, or when the tooltip is styled in a way that doesn't use direct text content.

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

### Correct: Tooltip with `aria-labelledby`

Reference another element that contains the descriptive text.

```html
<button aria-describedby="tip7">Delete</button>
<div role="tooltip" id="tip7" aria-labelledby="tip7-label"></div>
<span id="tip7-label">Permanently delete this item</span>
```

### Correct: Tooltip with `title` Attribute

The `title` attribute provides an accessible name as a fallback, though inner text or `aria-label` are generally more reliable across assistive technologies.

```html
<button aria-describedby="tip8">Print</button>
<div role="tooltip" id="tip8" title="Print the current document"></div>
```