What This Rule Checks
ARIA tooltips, defined by role=”tooltip”, must have clear and accessible names that are understandable by assistive technologies. This ensures that users relying on screen readers can understand the purpose of the tooltip and the information it provides.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Tooltips provide supplementary information that screen reader users access through aria-describedby associations. Empty or unnamed tooltips result in broken associations and missing context for users who need additional guidance.
How to Fix
Ensure that every tooltip element (role=”tooltip”) has an accessible name by using one of the following methods:
Inner Text: Ensure the tooltip contains text that can be read by screen readers.
aria-label: Use the aria-label attribute to provide a direct label for the tooltip.
aria-labelledby: Reference another element with text using the aria-labelledby attribute to give the tooltip an accessible name.
Code Examples
<!-- Tooltip with no accessible name -->
<div role="tooltip"></div>
Copy
<!-- Tooltip with content serving as accessible name -->
<div role="tooltip" id="pw-tip">
Password must be at least 8 characters
</div>
<input type="password" aria-describedby="pw-tip">
Copy
Common Mistakes to Avoid
- Creating empty tooltip elements that are referenced by aria-describedby.
- Using role=”tooltip” on elements that aren’t associated with a trigger via aria-describedby.
- Relying on CSS :hover content that isn’t present in the DOM for screen readers.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
• 4.1.2: Name, Role, Value