Ensures Every ARIA Tooltip Node Has an Accessible Name

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Low vision Hearing Mobility

Standards: WCAG 2.2 Level A

Aria tooltip elements must have clear text that describes the destination, purpose, function, or action for users who rely on screen readers.

Why It Matters

Screen reader users will not be able to understand the purpose of elements with role=”tooltip” that do not have an accessible name.

Fixing the Issue

Check all elements with role=”tooltip” to ensure they have a discernible, accessible name.

Good Code Example

The aria-tooltip-name rule has four markup patterns that pass test criteria:

Code example

<div role="tooltip" id="al" aria-label="Name"></div><div role="tooltip" id="alb" aria-labelledby="labeldiv"></div><div role="tooltip" id="combo" aria-label="Aria Name">Name</div><div role="tooltip" id="title" title="Title"></div>

Copy

Bad Code Example

The aria-tooltip-name rule has four markup patterns that fail testing criteria:

Code example

<div role="tooltip" id="empty"></div><div role="tooltip" id="alempty" aria-label=""></div><div role="tooltip" id="albmissing" aria-labelledby="nonexistent"></div><div role="tooltip" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>

Copy