Back to Info and Examples for Accessibility Insights for Web
button-name
All <button> elements must have accessible names.
Why it matters
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 a button doesn’t have an accessible name, people who use assistive technologies have no way of knowing its purpose.
How to fix
For each <button> element, provide an accessible name using one of the following methods.
Good
titleattribute
Better
aria-labelattributearia-labelledbyattribute referencing visible text
Best
- Inner text that’s available to assistive technologies (not marked with
display: noneoraria-hidden="true")
Example
Fail
Pass
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 - Element’s default semantics were overridden with
role="presentation"orrole="none"and the element was made disabled by use of thedisabledattribute
Use caution when applying role="presentation" or role="none" to a <button> element.
These roles instruct assistive technologies to disregard the element’s implicit role without hiding its content from users. However, per ARIA's Presentational Roles Conflict Resolution, user agents MUST ignore the presentation or none role when used on a focuable element, such as a <button>. This is true even if the button were to be provided a tabindex=-1, as the element would still be focusable, though it would not be in the page's tab order. If one needs to truly hide the semantics and functionality of a <button> element, it would likely be easiest to use a different element instead.