Skip to content

How to label form fields

Accessibility1 min readFixes check form-labels

Every input needs a label so screen readers announce what it is for. Placeholders are not labels.

Step by step, with screenshots: Accessibility checker results — fixing the ten findings we see most →

Check your own site

Runs this check and the other 186, free, in about 45 seconds.

What a passing site looks like

  • Every form field has a labelfail · −5 ptseffort S

Form field labels

Why it matters. Without a label a screen reader announces only "edit text", so visitors cannot tell the email field from the search box. Labels also make the tap target bigger on phones.

How to fix it.
  1. Give every input, select and textarea a <label for="…"> that matches its id, or wrap the field in the label.
  2. Where a visible label does not fit the design, add aria-label="…" to the field; a placeholder is not a label.

Filed under Accessibility. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.