How to Add Form Labels So Everyone Can Use Your Forms
Unlabeled form fields are invisible to screen readers and confusing for everyone. Here is how to label inputs properly so your forms actually convert.
Reviewed by Jacob Rhinehart for Strelva's co-founder; products and operations lead responsibilities.
A form field without a label is a guessing game. Sighted visitors might infer what a box is for from a faint placeholder, but screen-reader users hear nothing useful, and the moment they start typing, placeholder text vanishes. Since forms are usually where money changes hands, an unlabeled form is a leaky funnel as well as an accessibility failure.
Why labels matter
Labels tell every visitor exactly what each field expects. They also enlarge the clickable area, which helps on mobile, and they satisfy WCAG's requirement that inputs have programmatic names.
Step by step
- Inventory your inputs. List every field across search boxes, newsletter signups, contact forms, and checkouts.
- Add a real label to each field. Use a visible <label> tied to the input's id. Where the design genuinely cannot show a label, an aria-label is an acceptable fallback. A placeholder alone is not, because it disappears on focus.
- Group related fields. Wrap sets of checkboxes or radio buttons in a fieldset with a legend so their shared question is announced.
- Mark required fields in words. Put "required" in the label text, not just a coloured asterisk that a screen reader may not convey.
- Connect error messages. Link a field to its error text with aria-describedby so the error is read out with the field.
- Test it. Click each label and confirm the matching input gets focus. If it does, the association is correct.
The quick win
Many form builders have a "show labels" toggle that is simply switched off. Turning it on can fix an entire form in seconds, before you touch any code.
Frequently asked
What business owners ask next.
Can I use placeholder text instead of a label?
No. Placeholder text disappears as soon as someone starts typing, and many screen readers do not treat it as a reliable label. Use a real label or, at minimum, an aria-label. A placeholder is a hint, not a substitute.
Do labels have to be visible?
Visible labels are best for everyone. When the design truly cannot show one, an aria-label keeps the field accessible to screen readers. But default to a visible label whenever you can.
How do I label a search box that only has a magnifying-glass icon?
Add an aria-label such as 'Search' to the input. The icon is visual shorthand; the aria-label gives screen-reader users the same information.