aria-tooltip-name
ARIA tooltips must have accessible names.
Description
An ARIA tooltip is a contextual popup that provides descriptive text for an interface element. Normally, the tooltip appears when the mouse is placed over the element or when the element receives focus. For screen reader users, it is essential that ARIA tooltip elements have clear and descriptive text that accurately conveys the purpose, function, action, or destination they represent.
Why is it important?
The accessible name serves the purpose of providing context to users of assistive technologies, allowing them to identify and understand certain elements. If an ARIA tooltip does not have an accessible name, individuals who rely on assistive technologies are unable to determine its purpose.
Examples
-
Success:
-
<div>
element withrole="tootltip"
has a non-emptyaria-labelledby
attribute pointing to an element with text which is discernible to screen reader users.
-
-
Failure:
-
<div>
element withrole="tooltip"
has an emptyaria-label
attribute.
-
How to fix?
Ensure that each element with role=”progressbar” has an accessible name using one of the following -
- An
aria-labelledby
attribute that references elements that are visible to screen readers. - A non-empty
title
attribute. - A non-empty
aria-label
attribute.
Tags
cat.aria, wcag2a, wcag412
References
- WCAG 4.1.2: Name, Role, Value
- Deque University: aria-tooltip-name
- Accessibility Insights: aria-tooltip-name
- Evinced Digital Accessibility Knowledge Base: aria-tooltip-name
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!