control-name-title-only
A button or link should not take its name only from its title
Flags a button or link whose only accessible name is its title attribute, shown only on mouse hover, for manual review.
Applies to. Buttons and links in the accessibility tree with a non-empty title attribute: <a href>, <area href>, <button>, <input> of type button, submit, reset or image, and elements whose role attribute, or ElementInternals, give them the button or link role.
Expectation. Accessible Name Computation takes a title as the name only when nothing else names the element: author naming (aria-labelledby, aria-label), an image button's alt, an input button's value, or, for buttons and links, their content.
- Something other than the title names the control: pass. The title is its description, a tooltip.
- The title is its only name: cantTell (
NAME_FROM_TITLE_ONLY).
The name is valid, so 4.1.2 is met, but a title is shown only on mouse hover: not on touch screens, not when the control takes focus from the keyboard, and not as text a person using speech input can read and say. Check whether the control can be given visible text, or an aria-label when it shows only an icon, with the title kept as a tooltip if wanted.
What a finding reports.
role: the control's role,buttonorlink.
These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.
Examples
<button title="Save the draft">Save</button>
The button's text names it; the title is a tooltip.
<button title="Close"><svg aria-hidden="true" width="12" height="12"></svg></button>
The title is the button's only name, shown only on mouse hover. A person checks whether it can have visible text, or an aria-label.
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_FROM_TITLE_ONLY
- Look at the button or link the report names without hovering over it.
- Decide whether what it shows (text or an icon) makes its purpose clear.
- Tab to it with the keyboard and note that the title tooltip does not appear.
Pass. The control's purpose is clear from what it shows, or it is given visible text or an aria-label with the title kept as a tooltip.
Fail. The purpose is only explained by a title that keyboard, touch and speech input users never see (best practice, accname 1.2).