Back to Info and Examples for Accessibility Insights for Web
aria-command-name
ARIA buttons, links, and menuitems must have accessible names.
Why it matters
ARIA buttons and links are custom controls corresponding respectively to HTML <button>, and <a> elements with valid href attributes. There is no <menuitem> element in HTML as it has been deprecated.
An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type.
When an ARIA button, link, or menuitem doesn't have an accessible name, people who use assistive technologies will have no way of knowing its purpose.
How to fix
For each element with "role="button", role="link", or role="menuitem", provide an accessible name using one of the following methods.
Good
titleattribute
Better
aria-labelattributearia-labelledbyattribute
Best
- Inner text that’s available to assistive technologies (not marked with
display: noneoraria-hidden="true")
Example
Fail
<a> element, displays an icon of a speaker to communicate the button's function. Because purely visual content is not accessible to people who use assistive technologies, they can't determine the button's purpose.<svg aria-hidden="true" focusable="false">
<use xlink:href="images/mute.svg#icon-sound">
</use>
</svg>
</a>
Pass
<a> element, giving the button an accessible name. Its purpose is communicated to everyone.<svg aria-hidden="true" focusable="false">
<use xlink:href="images/mute.svg#icon-sound">
</use>
</svg>
</a>
About this rule
This rule passes if ANY of the following is true:
- Element has inner text that is visible to screen readers
- Element has an
aria-labelledbyattribute that references an element or elements containing text - Element has a non-empty
aria-labelattribute - Element has a non-empty
titleattribute