---
title: ARIA Tooltip Accessible Name | Accessibility Rule
description: ARIA tooltip nodes must have an accessible name. Why the aria-tooltip-name
  rule fails (WCAG 2.0, serious impact) and how to fix it with TestingBot.
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/aria-tooltip-name
  md: https://testingbot.com/support/accessibility/web/rules/aria-tooltip-name.md
---

# Ensure every ARIA tooltip node has an accessible name

Rule ID: aria-tooltip-name User Impact: serious Guidelines: WCAG 2.0

Elements with the `role="tooltip"` must have discernible text that clearly describes their purpose, function, or action for screen reader users.

## About This Rule

This rule checks all elements with `role="tooltip"` to ensure they have a discernible, accessible name, as required by the WAI-ARIA specifications. Providing accessible names is crucial for assistive technologies to convey the purpose of tooltips to users.

## Why It Matters

Screen reader users rely on accessible names to understand the purpose of elements. Tooltips without accessible names are not perceivable to these users, leading to confusion and a diminished user experience.

## How to Fix

Ensure that each element with `role="tooltip"` has one of the following characteristics:

- Inner text that is discernible to screen reader users.
- A non-empty `aria-label` attribute.
- An `aria-labelledby` attribute pointing to an element with discernible text.

### Correct Markup Solutions

```html
<!-- Tooltip with inner text -->
<div role="tooltip">Tooltip Text</div>

<!-- Tooltip with aria-label -->
<div role="tooltip" aria-label="Tooltip Text"></div>

<!-- Tooltip with aria-labelledby -->
<div role="tooltip" aria-labelledby="tooltipLabel"></div>
<div id="tooltipLabel">Tooltip Text</div>

<!-- Tooltip with title attribute -->
<div role="tooltip" title="Tooltip Text"></div>
```

### Incorrect Markup Solutions

```html
<!-- Tooltip without accessible name -->
<div role="tooltip"></div>

<!-- Tooltip with empty aria-label -->
<div role="tooltip" aria-label=""></div>

<!-- Tooltip with non-existent aria-labelledby reference -->
<div role="tooltip" aria-labelledby="nonexistent"></div>

<!-- Tooltip with aria-labelledby pointing to empty element -->
<div role="tooltip" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>
```

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [aria-valid-attr-value](https://testingbot.com/support/accessibility/web/rules/aria-valid-attr-value)
- [aria-valid-attr](https://testingbot.com/support/accessibility/web/rules/aria-valid-attr)
- [blink](https://testingbot.com/support/accessibility/web/rules/blink)
- [button-name](https://testingbot.com/support/accessibility/web/rules/button-name)
- [bypass](https://testingbot.com/support/accessibility/web/rules/bypass)