Accessibility Insights

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

  • title attribute

Better

  • aria-label attribute
  • aria-labelledby attribute referencing visible text

Best

  • Inner text that’s available to assistive technologies (not marked with display: none or aria-hidden="true")

Example

 

Fail

This button contains an image of binoculars to visually convey its purpose, but it doesn't have an accessible name. People who use assistive technologies can't determine its purpose.
<button id="find"><img src="find.jpg></button>
 

Pass

Visible inner text gives the button an accessible name. Its purpose is communicated to everyone
<button id="find"><img src="find.jpg>Find</button>

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-labelledby attribute that references an element or elements containing text
  • Element has a non-empty aria-label attribute
  • Element has a non-empty title attribute
  • Element’s default semantics were overridden with role="presentation" or role="none" and the element was made disabled by use of the disabled attribute

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.

More examples