Form elements must have labels. Use <label>, aria-label, or aria-labelledby.

Every form field needs an accessible name so that assistive technologies can announce what the field is for. When a screen reader encounters an <input>, <select>, <textarea>, or a custom control with a role like checkbox, combobox, listbox, radio, searchbox, slider, spinbutton, switch, or textbox, it reads the accessible name aloud. Without one, users who rely on screen readers hear something generic like "edit text" or "checkbox" with no indication of what information the field expects. Keyboard-only users and voice control users are also affected, since voice control software often uses visible labels to target form fields by name.

This rule maps to WCAG 2.0 success criterion 4.1.2 Name, Role, Value at Level A. That success criterion requires every user interface component to have a name that can be programmatically determined. A form field that lacks an accessible name fails this requirement outright.

How to fix it

There are several ways to give a form field an accessible name. Choose the method that fits the situation:

Use a <label> element. This is the most common and preferred approach. Either wrap the input inside the <label>, or use the for attribute on the <label> to point to the input's id. This method creates both a visible label and a programmatic association, which also gives sighted users a larger click target.

Use aria-label. When a visible label is not part of the design (for example, a search field next to a search button), add an aria-label attribute directly on the form field. The value is a text string that screen readers will announce. Keep in mind that aria-label produces no visible text, so it should only be used when the field's purpose is already visually clear from surrounding context.

Use aria-labelledby. When the label text already exists somewhere on the page but is not a <label> element, use aria-labelledby on the form field and set its value to the id of the element containing the label text.

A common mistake is relying on placeholder text as the only label. While some browsers do expose placeholder as the accessible name when nothing else is available, placeholder text disappears as soon as the user starts typing. This makes the field harder to use for people with cognitive disabilities and for anyone who needs to verify what they entered. Always provide a persistent label through one of the methods above.

Labels should describe the information being requested, not the type of field. "Email address" or "Phone number" are good labels. "Text field" or "Input" are not.

This rule also applies to disabled form fields. Many assistive technologies include disabled fields when listing all form controls on a page, so those fields still need accessible names.

Examples

Missing label on an input

This input has no <label>, no aria-label, and no aria-labelledby. A screen reader will not be able to announce what the field is for.

<div>Email address</div>
<input type="email" />

Placeholder used as the only label

The placeholder text disappears when the user types, leaving no persistent indication of the field's purpose.

<input type="text" placeholder="First name" />

Fixed with a <label> wrapping the input

<label>
  Email address
  <input type="email" />
</label>

Fixed with a <label> using the for attribute

<label for="email">Email address</label>
<input type="email" id="email" />

Fixed with aria-label

<input type="search" aria-label="Search" />
<button type="submit">Search</button>

Fixed with aria-labelledby

<div id="comment-label">Your comment</div>
<textarea aria-labelledby="comment-label"></textarea>

Select element with a proper label

<label for="country">Country</label>
<select id="country">
  <option>Canada</option>
  <option>Mexico</option>
  <option>United States</option>
</select>

Checkbox with a label

<label>
  <input type="checkbox" />
  I agree to the terms of service
</label>

Learn more:

W3C Reference

Understanding Success Criterion 1.3.1: Info and Relationships

→

W3C Reference

Understanding Success Criterion 4.1.2: Name, Role, Value

→

W3C Reference

HTML Technique H44: Using label elements to associate text labels with form controls

→