Why do form fields need labels?

A label is the visible text tied to a form field in the code, so that a screen reader announces "Email address" when the field gets focus, and so that clicking the text puts the cursor in the field. Placeholder text inside the field is not a label: it disappears the moment someone starts typing, and screen readers often ignore it. Every field should have a label element linked to it.

Why it matters

A contact form is the point of most business sites, and an unlabelled one is unusable to a screen reader user, who hears "edit text" for every field with no idea which is which. Placeholder-only forms are hard for everyone: once you have typed in a field you cannot see what it was for, the grey text often fails contrast standards, and browsers' autofill works less reliably. Labels also make the click target bigger, which helps on phones.

Doing it properly

Each input has an id, and a label element with a matching "for" attribute sits next to it. That link is what screen readers and browsers use. Wrapping the input inside the label element works too. A placeholder can still show an example, such as "you@example.co.uk", alongside the label rather than instead of it. If a design really cannot show visible labels, an aria-label attribute on the field gives screen readers the name, though a visible label is better for everyone.

How to check

Our check counts the text, email, telephone and textarea fields on your home page that have no associated label, aria-label or aria-labelledby. Clicking the label text should move the cursor into the field; if it does not, the label is not linked.

How to fix it

On WordPress, Contact Form 7, Gravity Forms and WPForms all support proper labels; in Contact Form 7 wrap each field tag in a label element, and in the others labels are on by default and should not be hidden. In page builders, look for a "show labels" setting on the form widget. On a hand-built form, add a label element for each field with a for attribute matching the field's id.

Not sure how your own site does on this? Run the free check: it takes about twenty seconds and reports on this and thirty other things.

Check my website

More guides