How to Add Labels to Form Inputs
Associate a visible label with every input so screen-reader users can fill your forms.
A form input without a label gives a screen-reader user no way to know what to type. Fix it with a visible label element whose for attribute matches the input's id — that also makes the label clickable, which enlarges the tap target. Placeholder text is not a label: it disappears the moment someone starts typing.
Why It Matters
A placeholder is not a label — it disappears when the user types and is often ignored by screen readers. Inputs without a programmatically associated label are unusable for assistive-tech users and fail accessibility audits.
How to Fix
Pair label and input
<label for="id"> matching the input's id (or wrap the input in the label).Label icon-only fields
aria-label.Code Fix
html<input type="email" placeholder="Email"> <!-- placeholder is not a label --><label for="email">Email</label>
<input id="email" type="email" autocomplete="email">Platform-Specific Instructions
Most form plugins (Contact Form 7, Gravity Forms) add labels — ensure "label" isn't hidden in favour of placeholder-only styling.
Always render a <label htmlFor> next to each input in your form components.
Fixed that one.
Now find the rest.
A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.
Run a free audit