An element which functions as a tooltip is missing an announcement
| Field | Value |
|---|---|
| Rule code | Manual_Tooltip_Announcement_Missing |
| WCAG conformance level | AA |
| WCAG success criterion | 1.4.13 Content on Hover or Focus |
| Must be fixed at source | No |
Description
Tooltip elements, contextual text bubbles that display a description for an element that appears on pointer hover or keyboard focus, need to be announced to screen reader users when they appear. Without proper announcements, screen reader users may not be informed that a tooltip has appeared, affecting their understanding of the context of the control element and their overall user experience and accessibility.
How to fix
Ensure the tooltip element has a role attribute of tooltip and a unique ID. Then add an aria-describedby attribute to the control element which opens the tooltip with the matching tooltip ID as the value: ```html
<div role="tooltip" id="tooltip1"> Password rules: new passwords must be different from the last 5 passwords used.</div>
<label for="password"> New Password </label>
<input type="password" id="password" aria-describedby="tooltip1">
``` Avoid using aria-haspopup or aria-expanded attributes as they are not appropriate for tooltips. Ensure that the tooltip content becomes visible when keyboard focus moves to the control element, and allow users to manually dismiss the tooltip by using their escape key.