Agent Wranglers

Accessibility Required

Label every form field

Give every form field a visible label tied to it with <label for>. A placeholder is not a label. These are WCAG criteria 1.3.1, 3.3.2 and 4.1.2 (A).

How to do it

Pair each input with <label for="id">, or wrap the input in its label. Group related fields, such as radio buttons, in a fieldset with a legend. Say in the label when a field is required or needs a format.

Example

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

<fieldset>
  <legend>Preferred contact</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

How to check

axe label passes. A browser test clicks each label, and focus lands in its field.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/form-labels.