How to label form fields
Every input needs a label so screen readers announce what it is for. Placeholders are not labels.
Step by step, with screenshots: Accessible forms and accessible names: labels, links and buttons →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
What it is
A form label is the text that tells people what to enter in a field, connected to the field in code so assistive technology announces it. In HTML that means a <label> element whose for attribute matches the input's id, or a <label> that wraps the input.
Without a connected label, a screen reader announces only "edit text", and people cannot tell the email field from the search box, which stops them signing up, buying or getting in touch. A connected label also makes its text clickable, which enlarges the tap target on phones. getReport lists fields with no label. A form is OK when every input, select and textarea has a visible label connected to it; placeholder text alone does not count.
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.
- Give every input, select and textarea a <label for="…"> that matches its id, or wrap the field in the label.
- Where a visible label does not fit the design, add aria-label="…" to the field; a placeholder is not a label.
Questions people ask
What is a form label in HTML?
It is the <label> element, which names a form control. <label for="email">Email address</label> followed by <input id="email" type="email"> connects the two, so screen readers say "Email address, edit text" and clicking the label focuses the field. You can also wrap the input inside the label, which connects them without an id.
How do I connect a label to an input?
Give the input a unique id and put the same value in the label's for attribute, or place the input inside the label element. For a group of radio buttons or checkboxes, label each option and wrap the group in a <fieldset> with a <legend> that asks the question. Test the connection by clicking the label: the field should receive focus.
Can I use aria-label instead of a visible label?
It gives screen readers a name, so the automated check passes, but a visible label is better. Sighted visitors, people with memory difficulties and voice-control users who say "click Email" all need to see the label. Use aria-label only where the purpose is visually obvious, such as a search field right next to a magnifier button.