Associate every form control with an explicit label

A control’s accessible name is what a screen reader says when focus arrives, what a voice-control user says to reach it, and what an error message refers to. In HTML that name comes from a label, and the association is carried by two attributes that have to match.

<form class="signup">
  <div class="field">
    <label for="email">Email address</label>
    <input
      id="email"
      name="email"
      type="email"
      autocomplete="email"
      required
      aria-describedby="email-hint"
    >
    <p id="email-hint" class="hint">Used for receipts only.</p>
  </div>

  <div class="field">
    <label for="region">Region</label>
    <select id="region" name="region" required>
      <option value="">Select a region</option>
      <option value="eu">European Union</option>
      <option value="uk">United Kingdom</option>
    </select>
  </div>

  <button type="submit">Create account</button>
</form>

The same association can be made by wrapping instead of pointing, which is the only case where a for attribute is genuinely optional.

<label class="consent">
  <input type="checkbox" name="marketing" value="digest">
  <span>Send me the monthly digest</span>
  <small>About 400 words, no attachments.</small>
</label>

When there is no room for visible text, the label still has to exist in the accessibility tree.

<form class="site-search">
  <label class="visually-hidden" for="q">Search examples</label>
  <input id="q" name="q" type="search">
  <button type="submit">Search</button>
</form>

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field {
  display: grid;
  gap: 0.25rem;
  margin-block-end: 1rem;
}

Explanation

A label with for="email" and an input with id="email" create a labelled-control relationship in the HTML parser, not a styling coincidence: the label’s descendant text becomes that control’s accessible name in the accname computation, and the association also means activating the label focuses or toggles the control. That second half is a real interaction gain, because the label is usually far wider than the checkbox or radio it names, so the activation area a reader has to aim at comfortably exceeds the 24 by 24 CSS pixels that WCAG 2.2 SC 2.5.8 describes. Explicit pairing is preferred over the wrapping form because it decouples the name from the position: the two can be siblings in a grid container, in different visual order, or even separated by other content, and the relationship survives. It also keeps the name clean, since a wrapping label takes its name from all of its text content, including the <small> aside in the second block, so that consent checkbox is announced as “Send me the monthly digest, about 400 words, no attachments” rather than the shorter phrase a reader would choose.

The hint text is deliberately outside the label and pulled in with aria-describedby. Labels answer “what is this”; descriptions answer “what should I know about it”, and merging them into the name makes every repeat of the field announce a paragraph. Descriptions are announced after the name and can be updated independently, which is also where a validation message belongs when the field has one. The required attribute is a state, not a name, so it needs a visible marker as well; the marker should be text inside the label or the instructions, because a red asterisk alone is colour-only signalling and fails SC 1.4.1 Use of Color for anyone who cannot see red.

Three boundaries are worth checking on your own form. More than one label may point at the same control, and their text is concatenated into one name, which is occasionally the intended answer and occasionally a mouthful. Buttons, links and other controls with their own content are not labelled this way: a label pointing at a button does not replace the text inside it, so an icon-only button takes a text alternative on the button itself rather than a label. And the association is not part of submission: id is for the label and script, name is what the browser sends, so a control that got an id but never a name looks complete, is announced correctly, and silently contributes nothing to the payload.