What does this accessibility issue mean?
To comply with WCAG Level A rules, check that all elements on your website with aria-describedby or aria-labelledby attributes have a tooltip name defined.
The tooltip name provides a brief description of the element’s purpose, making it easier for assistive technology users to understand its function.
Example HTML violation: Inaccessible ARIA tooltip node name (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Test Page</title>
<button id="testButton" aria-describedby="testTooltip">Hover Me!</button>
<span id="testTooltip" role="tooltip"></span>
</body>
</html>The above HTML violates the aria-tooltip-name accessibility rule because the tooltip with the role of tooltip does not have an accessible name. This means that assistive technologies cannot detect its purpose.
To ensure accessibility, you can use either the title, aria-label, or aria-labelledby attribute to provide an accessible name for the tooltip. This will allow assistive technologies to properly identify and convey its purpose to users.
How to fix "Inaccessible ARIA tooltip node name (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Test Page</title>
<button id="testButton" aria-describedby="testTooltip">Hover Me!</button>
<span id="testTooltip" role="tooltip" aria-label="This is a tooltip for the button.">This is a tooltip for the button."</span>
</body>
</html>In the above code, the aria-label attribute is used to add an accessible name to the tooltip. It's also possible to link visible text as the accessible name using the aria-labelledby attribute.
