aria-tooltip-name

The tooltip role is used to provide additional contextual information about another element, typically when that element receives keyboard focus or mouse hover. For this to be effective and accessible, the tooltip itself must expose a clear, accessible name to assistive technologies. If a tooltip lacks an accessible name, whether from its contents, the title attribute or an ARIA attribute, it cannot convey its intended description. This prevents screen reader users from understanding the tooltip’s purpose or content, making interactions confusing or incomplete.

Tooltips can get their accessible name in four ways:

• From the text content inside the element
• Using aria-label with a string value
• Using aria-labelledby to reference another element with discernible text
• Using title with a string value

Pass Patterns

Using aria-label

This tooltip includes an aria-label that provides an accessible name.

<div role="tooltip" id="tip1" aria-label="Helpful description"></div>

Using aria-labelledby

This example uses aria-labelledby to reference another element with visible text.

<div id="tooltipLabel">What is reading mode?</div>
<div role="tooltip" id="tip2" aria-labelledby="tooltipLabel">
    <!-- Tooltip content -->
</div>

Accessible name via text content

This tooltip gets its name from its inner text content, which is directly exposed to assistive technologies.

<div role="tooltip" id="tip3">This is the tooltip text</div>

Using the title attribute

This example uses the title attribute, which is generally discouraged for critical content but still provides a name.

<div role="tooltip" id="tip4" title="Info text"></div>

Fail Patterns

Missing name

This tooltip has no content or accessible naming attributes, so it lacks an accessible name.

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

Empty aria-label attribute

This tooltip includes an empty aria-label, which results in no accessible name.

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

Non-existent aria-labelledby references

This tooltip uses aria-labelledby to reference a non-existent element.

<div role="tooltip" id="tooltip3" aria-labelledby="missingLabel"></div>

Referring an empty element via aria-labelledby

This tooltip references an empty element via aria-labelledby, which doesn’t provide a name.

<div id="emptyLabel"></div>
<div role="tooltip" id="tooltip4" aria-labelledby="emptyLabel"></div>

WCAG techniques

Sufficient techniques

• ARIA16: Using aria-labelledby to provide a name for user interface controls
• ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used

Try It Yourself

Using a screen reader

1. Load the page, open a screen reader.
2. Navigate to the interactive element that triggers a tooltip.
3. Wait for the tooltip to appear or focus on the element manually.

Expected result: The screen reader announces the tooltip’s accessible name when it appears.

Actual result: The tooltip is visually present but not announced or described.

Inspecting the browser dev-tools

1. Open the Accessibility Tree panel.
2. Select the tooltip element.

Expected result: The Name field shows the text you provided.

Actual result: If unnamed, Name is empty.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Braille

Related Issues

• aria-dialog-name