ARIA tooltips must have accessible names
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Tooltips provide essential contextual help. Without an accessible name, assistive technologies cannot announce the tooltip’s purpose or content, leaving users unaware of information that may clarify actions or input requirements.
How to fix this issue
Assign a clear and concise accessible name using aria-label or aria-labelledby. Ensure the tooltip text appears when users hover or focus on the trigger element and that the description disappears appropriately when focus moves away. Prefer using the native HTML 'title' attribute only for simple text tips.
Developer guidance
Tooltip accessibility problems often surface when developers rely solely on visual hover states. In your design system, pair every tooltip with programmatic label connections and keyboard triggers. Test tooltip visibility and announcements across NVDA, JAWS, and VoiceOver. Validated against WAI-ARIA 1.2 (December 2021).
Code examples
Incorrect Implementation
<div role="tooltip"></div>Correct Implementation
<div role="tooltip" aria-label="Enter your username"></div>
Trusted by organizations across Europe working toward WCAG and EAA conformance