Aria Tooltip Name
Critical - WCAG Level A
The accessibility issue arises when ARIA tooltips are not properly labeled with an accessible name. Tooltips are often used to provide additional context or information about an element when a user hovers over or focuses on it. If these tooltips lack an accessible name, users relying on screen readers or other assistive technologies may not receive the necessary information, leading to confusion and a poor user experience.
For users with disabilities, particularly those who are blind or have low vision, tooltips can be a critical source of information. Without an accessible name, these users may not be aware of the tooltip's existence or its content. This can hinder their ability to navigate and interact with the web effectively, ultimately leading to a frustrating experience. Ensuring that tooltips are properly labeled helps create a more inclusive environment for all users.
How to fix it:
Identify Tooltip Elements: Locate all elements in your code that use ARIA roles for tooltips (e.g.,
role="tooltip").Add Accessible Names: Use the
aria-labelattribute to provide a clear and concise name for the tooltip. Alternatively, if the tooltip content is already present in the DOM, you can usearia-labelledbyto reference the ID of the element containing the tooltip text.Ensure Visibility: Make sure that the tooltip is visible to screen readers when it appears. This often involves managing focus and ensuring that the tooltip is rendered in the DOM when triggered.
Best Practices
Use clear and descriptive text for tooltips that accurately reflects the information being provided.
Consider using
aria-hidden="true"on the tooltip when it is not visible to prevent screen readers from announcing it unnecessarily.Test tooltips with various assistive technologies to ensure they are announced correctly.
Common Mistakes
Forgetting to add
aria-labeloraria-labelledbyto tooltip elements.Using tooltips that are only visually present without ensuring they are accessible to screen readers.
Not testing tooltips with actual users of assistive technologies, which can lead to overlooking critical accessibility issues.