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

Understanding Success Criterion 3.3.2: Labels or Instructions

Understanding Success Criterion 4.1.2: Name, Role, Value