Form fields without labels

Medium priorityTechnical

Some inputs, selects or textareas have no associated label, so screen readers can’t say what to enter.

What triggers this issue

• A form field has no <label for>, wrapping <label>, aria-label, aria-labelledby, title or placeholder.

Why it matters

Labels tell everyone what a field is for, and clicking a label focuses its field, which helps on small touch screens. Unlabelled fields fail WCAG and make forms (and conversions) harder for many people.

How to fix it

1. Add a visible <label> with a for attribute matching the field’s id, or wrap the field in the label.
2. Use aria-label only when a visible label really isn’t possible, such as a single search box.

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