Why ARIA Tooltips Must Have Discernible Text

ARIA tooltips provide supplementary descriptive text for another element. They are not interactive controls and are not intended to receive focus. In accessible implementations, tooltip content is typically exposed to assistive technologies as a description of another element, most often via aria-describedby.

For this to work, the tooltip node itself must expose discernible text that assistive technologies can read. If the tooltip has no readable text, it contributes nothing to accessibility, even if it is visually styled as a tooltip.

WCAG Success Criteria

4.1.2 — Name, Role, Value (Level A)

User interface components must have a name and role that can be programmatically determined.

While tooltips are not independently operable components, they are still exposed as semantic nodes.
If a tooltip node has no discernible text, it cannot contribute meaningfully to name or description computation.

1.4.13 — Content on Hover or Focus (Level AA)

Tooltips are a common example of content that appears on hover or focus.
When used, they must:

• Be dismissible (e.g., Escape key)
• Remain visible while hovered or focused
• Not obscure content irreversibly
• Be available on focus, not hover alone

This criterion is highly relevant to tooltip implementations.

What an ARIA Tooltip Actually Is

What role="tooltip" Means

An ARIA tooltip is not defined by appearance.

It is defined by:

role="tooltip"

A tooltip:

• Is supplementary
• Is not interactive
• Is typically referenced by another element using aria-describedby
• Exists to provide additional explanation, not essential information

How Screen Readers Announce Tooltips

Tooltips are rarely announced as standalone items. In practice, screen readers announce tooltip text as part of the description of the triggering element.

Example:

<button aria-describedby="tip1">Save</button>
<div id="tip1" role="tooltip">Saves your changes</div>

Typical screen reader output: “Save, button. Saves your changes.”
Not: “Tooltip: Saves your changes.”

Many screen readers do not announce the word “tooltip” at all.

What This Rule Checks

This rule verifies that:

• Every element with role="tooltip" contains discernible text
• That text can be exposed to assistive technologies
• The tooltip can meaningfully function as descriptive content

The rule does not require tooltips to be focusable or interactive.

Discernible Text vs Accessible Name

Tooltips usually contribute descriptions, not primary names.

However, from a technical standpoint:

• A tooltip node with readable text does have an accessible name
• An empty tooltip node has no name and no description
• A tooltip with broken ARIA references contributes nothing

In other words, If a tooltip has no readable text, it is invisible to assistive technologies.

How Text Is Computed for Tooltips

Text exposure follows the Accessible Name and Description Computation (AccName 1.2) algorithm.

In practical terms, for tooltips:

1. aria-labelledby (if present and valid)
2. Text content of the tooltip element
3. aria-label
4. title (inconsistently supported; last resort)

For tooltips, inner text is usually sufficient and preferred.

Correct Markup Examples

Tooltip with readable text (recommended)

<div role="tooltip" id="combo">Name</div>

✔ Discernible text is present

Tooltip with aria-labelledby

<div id="labeldiv">Tooltip text</div>
<div role="tooltip" id="alb" aria-labelledby="labeldiv"></div>

✔ Text is computed from the referenced element

Tooltip with aria-label

<div role="tooltip" id="al" aria-label="Name"></div>

✔ Explicit text provided

Tooltip using title (discouraged)

<div role="tooltip" id="title" title="Title"></div>

✔ May be announced

Incorrect Markup Examples

Empty tooltip

<div role="tooltip" id="empty"></div>

✖ No discernible text

Empty aria-label

<div role="tooltip" id="alempty" aria-label=""></div>

✖ Empty aria-label results in no text

Broken aria-labelledby

<div role="tooltip" id="albmissing" aria-labelledby="nonexistent"></div>

✖ Referenced element does not exist

aria-labelledby referencing empty element

<div role="tooltip" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>

✖ Referenced element contains no readable text

When You Should (and Should Not) Use role="tooltip"

Appropriate Use

• Supplementary explanations
• Clarifying abbreviations or icons
• Non-essential hints

Inappropriate Use

• Required instructions
• Error messages
• Form labels
• Interactive content
• Replacing visible text

If the information is essential, it must not be hidden in a tooltip.

Mobile and Touch Considerations

Tooltips triggered only on hover are not accessible on touch devices.

If tooltips are used:

• Ensure they appear on focus
• Or avoid tooltips entirely for critical information

This is a common usability failure in mobile contexts.

How This Is Tested

Audits verify that:

• Tooltip nodes contain readable text
• Referenced text exists and is non-empty
• Tooltip content is exposed to the accessibility tree
• Hover/focus behaviour complies with WCAG 1.4.13

Automated tools detect empty or broken tooltip nodes.
Manual testing confirms announcement behaviour.

How to Fix the Problem

• Ensure tooltip nodes contain readable text
• Avoid empty containers styled visually via CSS
• Use aria-describedby correctly on the triggering element
• Do not rely on title alone
• Do not place essential information inside tooltips

Wrapping Up

ARIA tooltips are descriptive helpers, not controls. They are announced as descriptions of other elements, not as standalone UI components. If a tooltip contains no readable text, assistive technologies have nothing to announce and the tooltip fails its purpose entirely. A tooltip that cannot be read might as well not exist.