---
title: ARIA Tooltip Accessible Name | Accessibility Rule
description: ARIA tooltip nodes must have an accessible name
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/aria-tooltip-name
  md: https://testingbot.com/support/accessibility/web/rules/aria-tooltip-name/index.md
---
# Ensure every ARIA tooltip node has an accessible name

Rule ID: aria-tooltip-nameUser Impact: seriousGuidelines: 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

    <!-- 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

    <!-- 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)