Form labels: every field needs a name

Who it affects

Screen reader users hear only “edit text” when a field has no label. Voice-control users can't say the field's name to move into it. And everyone loses when a placeholder disappears the moment they start typing.

Use a visible label, connected to the field

Put a label element on every field and point it at the field's id. Clicking the label then focuses the field, and screen readers read the label when the field gets focus.

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

The autocomplete attribute tells browsers and assistive tools what the field is for, so they can fill it in (WCAG 1.3.5).

A placeholder is not a label

Placeholder text is usually too light to read, it vanishes when someone types, and some assistive tools ignore it. Keep the label visible; use the placeholder, if at all, for an example of the format.

Group choices

Radio buttons and checkboxes that answer one question go in a fieldset, with the question as its legend.

<fieldset>
  <legend>Pickup or delivery?</legend>
  <label><input type="radio" name="mode" value="pickup"> Pickup</label>
  <label><input type="radio" name="mode" value="delivery"> Delivery</label>
</fieldset>

Required fields and errors

• Say a field is required in the label text (“Phone (required)”) or with the required attribute, not with a red asterisk alone.
• Show errors next to the field, in words that say how to fix it: “Enter a phone number with area code”, not “Invalid input”.
• Connect the error to the field with aria-describedby, so it is read when the field gets focus.