Form field labels: make every input say what it is

What WCAG asks for

Two success criteria cover labels. 1.3.1 Info and Relationships says the connection between a label and its field must be available in code, not only visually. 4.1.2 Name, Role, Value says every control needs an accessible name. Criterion 3.3.2 Labels or Instructions adds that fields need visible labels or instructions.

In practice: every <input>, <select> and <textarea> needs a label that assistive technology can read, and people need to see it too.

The most common mistakes

• Placeholder used as the only label. It disappears as soon as you type, it is usually low contrast, and many screen readers do not treat it as a name.
• A label that is not connected. Text sits next to the field, but nothing in the code ties them together.
• Icon-only fields. A search box with only a magnifying glass.
• Form builders and plugins that output fields with an id but a <label> pointing somewhere else.
• Groups without a question. Radio buttons for "Yes" and "No" with no indication of what they answer.

How to fix it

Connect a visible label with for and id:

<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">

Or wrap the field in its label:

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

Group related radio buttons and checkboxes with a fieldset, so the question is read with each option:

<fieldset>
    <legend>Have you visited us before?</legend>
    <label><input type="radio" name="returning" value="yes"> Yes</label>
    <label><input type="radio" name="returning" value="no"> No</label>
</fieldset>

When a visible label really does not fit the design, such as a search field next to a "Search" button, give the field an accessible name with aria-label:

<input type="search" name="q" aria-label="Search the site">
<button type="submit">Search</button>

Make the rest of the form easier too

• Mark required fields in the label text, not only with color or a lone asterisk.
• Use the right type and autocomplete values so phones show the right keyboard and browsers can fill in details.
• Show error messages next to the field, in text, and connect them with aria-describedby.
• After a failed submit, move focus to the first field with an error.

What automated checks miss

A check can confirm that a field has a name. It can not tell whether the name makes sense ("Field 3"), whether error messages are announced, or whether the whole form works with a keyboard from the first field to the submit button. Those need a person with a keyboard and a screen reader.

Last updated October 18, 2026.