Ensure every ARIA tooltip node has an accessible name

Elements with the role="tooltip" must have discernible text that clearly describes their purpose, function, or action for screen reader users.

About This Rule

This rule checks all elements with role="tooltip" to ensure they have a discernible, accessible name, as required by the WAI-ARIA specifications. Providing accessible names is crucial for assistive technologies to convey the purpose of tooltips to users.

Why It Matters

Screen reader users rely on accessible names to understand the purpose of elements. Tooltips without accessible names are not perceivable to these users, leading to confusion and a diminished user experience.

How to Fix

Ensure that each element with role="tooltip" has one of the following characteristics:

• Inner text that is discernible to screen reader users.
• A non-empty aria-label attribute.
• An aria-labelledby attribute pointing to an element with discernible text.

Correct Markup Solutions

<!-- Tooltip with inner text -->
<div role="tooltip">Tooltip Text</div>

<!-- Tooltip with aria-label -->
<div role="tooltip" aria-label="Tooltip Text"></div>

<!-- Tooltip with aria-labelledby -->
<div role="tooltip" aria-labelledby="tooltipLabel"></div>
<div id="tooltipLabel">Tooltip Text</div>

<!-- Tooltip with title attribute -->
<div role="tooltip" title="Tooltip Text"></div>

Incorrect Markup Solutions

<!-- Tooltip without accessible name -->
<div role="tooltip"></div>

<!-- Tooltip with empty aria-label -->
<div role="tooltip" aria-label=""></div>

<!-- Tooltip with non-existent aria-labelledby reference -->
<div role="tooltip" aria-labelledby="nonexistent"></div>

<!-- Tooltip with aria-labelledby pointing to empty element -->
<div role="tooltip" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>