Issue with tooltip and WCAG validation
-
I receive this issue about the WCAG validation:
“This element with a role of “tooltip” does not have an accessible name”This the explanation of the Stark validator tool:
The
divelement withrole="tooltip"lacks an accessible name, preventing screen readers from identifying its purpose. This violates accessibility guidelines.SolutionProvide an accessible name to the tooltip element using either
aria-labelledbyoraria-describedby.Using
aria-labelledby(if the tooltip’s content is a concise label):<button id="myButton">Hover Me</button>
<div role="tooltip" class="anww-tooltip" style="position: absolute; background: white; color: rgb(30, 30, 30); font-size: 16px; border: 1px solid black; padding: 5px 10px; z-index: 9999; display: none; pointer-events: auto; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; max-width: 200px; white-space: nowrap;" aria-labelledby="myButton">
This is a tooltip!
</div>Using
aria-describedby(if the tooltip provides additional information):<button id="myButton">Hover Me</button>
<div role="tooltip" class="anww-tooltip" style="position: absolute; background: white; color: rgb(30, 30, 30); font-size: 16px; border: 1px solid black; padding: 5px 10px; z-index: 9999; display: none; pointer-events: auto; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; max-width: 200px; white-space: nowrap;" aria-describedby="myButton">
This is a tooltip with extra info!
</div>aria-labelledby: The tooltip labels the element.aria-describedby: The tooltip describes the element, providing additional context.
Alternatively, add
aria-labelfor a self-contained tooltip.<div role="tooltip" aria-label="This is a tooltip" class="anww-tooltip" style="position: absolute; background: white; color: rgb(30, 30, 30); font-size: 16px; border: 1px solid black; padding: 5px 10px; z-index: 9999; display: none; pointer-events: auto; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; max-width: 200px; white-space: nowrap;">This is a tooltip!</div>
You must be logged in to reply to this topic.
