Ensures Every ARIA Tooltip Node Has an Accessible Name
Blind
Low vision
Hearing
Mobility
WCAG 2.1 Level A
Aria tooltip elements must have clear text that describes the destination, purpose, function, or action for users who rely on screen readers.
Screen reader users will not be able to understand the purpose of elements with role=”tooltip” that do not have an accessible name.
Check all elements with role=”tooltip” to ensure they have a discernible, accessible name.
The aria-tooltip-name rule has four markup patterns that pass test criteria:
<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
The aria-tooltip-name rule has four markup patterns that fail testing criteria:
<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