A tooltip must be referenced by the element it describes

Rule tooltip-referenced · Component patterns (best practice) · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A tooltip provides supplementary text for the control it belongs to, connected with aria-describedby. A tooltip with no id, or one nothing references, is never announced.

How to fix#

Give the tooltip an id and point to it from its trigger with aria-describedby (or aria-labelledby).

Example#

<span role="tooltip" id="tip1">Saves your work</span>

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

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Tooltip