• June 1, 2025

Accessible Tooltip Naming

Rule ID: aria-tooltip-name
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

To make tooltips accessible, ensure that each element with role="tooltip" includes a name that is programmatically discernible by assistive technologies like screen readers. The tooltip must communicate its purpose or content clearly.

Correct implementations include:

To pass this rule, a tooltip element must:

• Have readable inner text, or

• Include a non-empty aria-label attribute, or

• Use aria-labelledby to point to an existing element containing discernible text.

Avoid these failing patterns:

These fail because they either lack any label entirely, point to a non-existent element, or reference elements that contain no text.

Why it Matters

Tooltips provide important contextual or descriptive information about an element. If they are not named properly, screen reader users receive no information, rendering these tooltips useless and possibly confusing.

Proper labeling ensures that users relying on assistive technology understand the purpose or content of the tooltip, enabling equitable access to the interface.

Rule Description

Elements with role="tooltip" must include accessible text—either directly, via aria-label, or aria-labelledby—to convey their purpose to screen reader users. This ensures that every tooltip is usable and informative, rather than silent or misleading.

The Algorithm (in simple terms)

1. Find all elements with role="tooltip".

2. Check if each one has:

   • Non-empty inner text, or

   • A non-empty aria-label attribute, or

   • An aria-labelledby attribute pointing to an element with discernible text.

3. If none of these are true, the element fails the rule.