Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web

label

Form controls must have accessible names.

Why it matters

A form control is an interactive HTML element used for user input. Form controls include buttons, checkboxes, text fields, color pickers, and more.

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 its name, not just by type (role).

When a form control doesn't have an accessible name, people who use assistive technologies have no way of knowing its specific purpose.

How to fix

For each <input> or <textarea> element, provide an accessible name using one of the following methods.

Good

  • title attribute
  • placeholder attribute

Better

  • aria-label attribute
  • aria-labelledby attribute

Best

  • Explicit <label> element
  • Implicit (wrapped) <label> element

Example

 

Fail

This <textarea> element is preceded by descriptive text in a <p> element, but the two elements are not programmatically associated to convey this information to assistive technologies. People who use assistive technologies can use the keyboard or speech commands to navigate to the <textarea>, but because it has no name, they won't know its purpose.

<p>Shipping instructions:</p><textarea rows="4" cols="50"></textarea>
 

Pass

An aria-labelledby attribute indicates to assistive technologies that the <p> element serves as a label for the <textarea> element. The purpose of the <textarea> is communicated to all users.
<label for="ship-instr">Shipping instructions:</label>
<textarea rows="4" cols="50" id="ship-instr"></textarea>

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 a non-empty element or elements which provide its accessible name
  • Element has a non-empty title attribute
  • Element has an explicit <label> that is not hidden
  • Element has an implicit (wrapped) <label>
  • Element has a non-empty placeholder attribute
  • Element is not focusable (i.e., disabled) and its default semantics are overridden with role="presentation" or role="none"

More examples