tooltip-name-present
Tooltips have an accessible name
Checks that elements with role="tooltip" expose a non-empty accessible name.
Applies to. Applies to elements whose role attribute resolves to tooltip: its first token naming a known role, matched in any case, is tooltip, so role="foo tooltip" and role="TOOLTIP" count while role="link tooltip" (a link) does not. The element must be included in the accessibility tree. An element with the matching implicit role but no role attribute is out of scope. A custom element whose ElementInternals give it the role (this.attachInternals().role), with no role attribute naming another, is in scope too: that is its default role, and no other rule checks it.
Expectation. The element has a non-empty accessible name from aria-label, from an aria-labelledby that resolves to non-empty text, from title, or, role="tooltip" being name-from-content, from its own subtree text, where a descendant's own name (an <img alt>, aria-label or title) counts as that descendant's contribution rather than only its text nodes. A missing name is reported at CANTTELL, not FAIL. WAI-ARIA requires a tooltip to have one, but a tooltip is not a user interface component in WCAG's sense, "a single control for a distinct function", and its name comes from its content, so a tooltip with none also shows no text: no information shown in text is missing from the accessibility tree. What it shows otherwise (an image with no text alternative) is the image rules' decision under SC 1.1.1. So the missing name proves the WAI-ARIA violation, not a failure of SC 4.1.2; a person settles whether the page relies on what the tooltip shows.
Examples
<div role="tooltip">Click to save your changes</div>
Visible text content names the tooltip.
<div role="tooltip"></div>
No text content and no accessible name, which WAI-ARIA requires. A tooltip is not a control, and an empty one shows nothing that is missing.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
name_closedContent
- Find the tooltip the report names and note the text or icon it shows on screen.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name, which the browser works out from content no script can read.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the tooltip, taken from its content, and the screen reader announces it.
Fail. The tooltip has no name in the accessibility tree, since its content gives none. That breaks WAI-ARIA; it fails WCAG only where the tooltip shows information, such as an image, with no text alternative (WCAG 1.1.1).
name_contentTooDeep
- Find the tooltip the report names and note the text it shows on screen.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name, which the browser works out from all of its nested content.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the tooltip, taken from its nested content, and the screen reader announces it.
Fail. The tooltip has no name in the accessibility tree, since its content gives none. That breaks WAI-ARIA; it fails WCAG only where the tooltip shows information, such as an image, with no text alternative (WCAG 1.1.1).
name_internals
- Inspect the tooltip the report names, a custom element, and note its role.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the tooltip, set through its internals or otherwise, and the screen reader announces it.
Fail. The tooltip has no name in the accessibility tree and the screen reader announces only its role. That breaks WAI-ARIA; it fails WCAG only where the tooltip shows information, such as an image, with no text alternative (WCAG 1.1.1).
name_missing
- Inspect the tooltip the report names and make it appear, by hovering over or focusing the element that shows it.
- Look at what it shows: text, an image or styled content.
- If it shows an image or icon, check whether it has a text alternative.
Pass. The tooltip shows nothing, or only decoration, so nothing people rely on is missing. Still give it text or remove it: WAI-ARIA requires a name.
Fail. The tooltip shows information, such as an image, that has no text alternative (WCAG 1.1.1).