Back to Info and Examples for Accessibility Insights for Web
aria-tooltip-name
ARIA tooltips must have accessible names.
Why it matters
An ARIA tooltip is a contextual popup with text describing an interface element. The tooltip typically becomes visible when the mouse hovers over, or focus is received by, the owning element. An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type. When an ARIA tooltip doesn't an accessible name, people who use assistive technologies have no way of knowing its purpose.
How to fix
For each element with role="tooltip", provide an accessible name using one of the following methods.
Good
titleattribute
Better
aria-labelattributearia-labelledbyattribute referencing visible text
Best
- Visible inner text that's available to assistive technologies (not marked with
display:noneoraria-hidden="true")
Example
Fail
<p> element is intended to serve as a tooltip for a button. However, through an oversight, the <p> element is empty. The tooltip won't be visible to any user. As a result, only people who can see the icon can tell the purpose of the button.<span role="img" aria-label="Settings">⚙️</span>
</button>
<p id="description" role="tooltip"></p>
Pass
<p> element, giving it an accessible name. Everyone can tell that the button allows you to edit your settings.<span role="img" aria-label="Settings">⚙️</span>
</button>
<p id="description" role="tooltip">Edit your settings</p>
About this rule
This rule passes if ANY of the following is true:
- Element has inner text that is visible to screen readers
- Element has an
aria-labelledbyattribute that references elements that are visible to screen readers - Element has a non-empty
aria-labelattribute - Element has a non-empty
titleattribute