ARIA tooltip nodes must have an accessible name

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.

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

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

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

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

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

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

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

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

Learn more:

Deque Reference

Deque University - How To Fix

→