ARIA tooltip must have an accessible name

Screen reader users are not able to discern the purpose of elements with role="tooltip" that do not have an accessible name.

Fixing the problem

Correct markup solutions

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>

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

    • Inner text that is discernible to screen reader users.
    • Non-empty aria-label attribute.
    • aria-labelledby pointing to element with text which is discernible to screen reader users.

Incorrect markup solutions

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>

Sitefig uses axe-core 4.2 for accessibility checking.
axe-core is the leading open source digital accessibility toolkit.