Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

input-button-name

Input buttons must have accessible names.

Why it matters

An input button is an <input> element whose type is button , reset , or submit. 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 input button doesn’t have an accessible name, people who use assistive technologies have no way of knowing its specific purpose.

How to fix

Provide an accessible name for each input button using one of the following methods.

Good

  • title attribute

Better

  • Non-empty value attribute
  • No value attribute (applies only if type is submit or reset ; causes the type value to be reported as the accessible name)
  • aria-label attribute

Best

  • aria-labelledby attribute

Example

 

Fail

CSS (not shown) is used to display an image on this input button. People with good vision can infer the button's purpose from the image. However, because the button doesn’t have an accessible name, assistive technology users can't determine its purpose.
<input type="button" id="new-account" />
 

Pass

An aria-label attribute provides an accessible name for the input button. Everyone can tell what the button does.
<input type="button" id="new-account" aria-label="Create my account" />

About this rule

This rule passes if ANY of the following is true:

  • Element has a non-empty aria-label attribute
  • Element has an aria-labelledby attribute that references elements that are visible to screen readers
  • Element has a non-empty title attribute
  • Element has a non-empty value attribute
  • Element with type submit or reset does not have a value attribute
  • Element’s default semantics were overridden with role="presentation" or role="none"

Use caution when applying role="presentation" or role="none" to an input button. These roles instruct assistive technologies to disregard the element’s implicit role without hiding its content from users. If an input button has inner text, adding a role of presentation or none will cause it to be reported to users as a text string with no semantic context. For more information, see Using ARIA: Use of Role=presentation or Role=none.

More examples

Understanding Success Criterion 4.1.2: Name, Role, Value