Labels and Accessibility

Associate <label> with inputs for accessible, clickable form fields.

Overview

The <label> element provides a text description for form controls. It is not optional without labels, your form is inaccessible to screen reader users, and its UX is degraded for everyone. Two ways to associate a label with an input: 1. Using for/id: the label's for attribute matches the input's id attribute 2. Wrapping: place the input inside the <label> element Properly labeled inputs have a larger click target (clicking the label focuses the input), are announced correctly by screen readers, and improve overall usability.

Key Points

•<label for="inputId"> associates with <input id="inputId"> via matching for/id pair
•Wrapping input inside label is an alternative: <label>Name <input type="text"></label>
•Every visible form field must have a label it is an accessibility requirement
•Clicking a label focuses its associated input larger hit target, better UX
•Placeholder text is not a substitute for labels it disappears when the user types
•Use aria-label or aria-labelledby for inputs that cannot have a visible label

Examples

Using for/id to associate label and input

<label for="username">Username</label>
<input type="text" id="username" name="username">

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

The for attribute value must exactly match the input's id.

Wrapping input inside label

<label>
  Username
  <input type="text" name="username">
</label>

<label>
  Password
  <input type="password" name="password">
</label>

This approach does not require id/for but is less flexible for CSS layout.

Labels with checkboxes and radio buttons

<!-- Checkbox with label -->
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">Subscribe to newsletter</label>

<!-- Radio group with labels -->
<fieldset>
  <legend>Preferred contact method</legend>
  <input type="radio" id="email-contact" name="contact" value="email">
  <label for="email-contact">Email</label>
  <input type="radio" id="phone-contact" name="contact" value="phone">
  <label for="phone-contact">Phone</label>
</fieldset>

Why placeholder is not a label

<!-- BAD: placeholder disappears when user types -->
<input type="text" placeholder="First name" name="firstname">

<!-- GOOD: visible label persists -->
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" placeholder="e.g. Jane">

Common Mistakes

Using placeholder as the only label it disappears when typing and has poor contrast
Having a label whose for value doesn't match any input's id the association breaks
Omitting labels entirely invisible to screen readers and bad UX

Note

Label + input is one of the most impactful accessibility wins in HTML. It costs one line of code and makes your form usable by keyboard users, screen reader users, and anyone on a small touchscreen.

Labels and Accessibility

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is the correct way to associate a label with an input using for/id?