WCAG 11.1 — Does every form field have a label?

Form fields without labels

The issue

Form fields without labels are a major barrier to accessibility. WCAG success criterion 3.3.2 requires that every form field (input, textarea, select) be associated with a label that clearly describes the expected information. Without a label, a screen reader user simply hears 'edit text' or 'list box' without knowing what to enter. The problem takes several forms. The most common is using a placeholder as the only field indication. The placeholder disappears as soon as the user starts typing, posing a memory problem: the user no longer remembers what was asked. Moreover, screen readers do not all handle placeholders the same way — some announce them, others do not. A placeholder is never an acceptable substitute for a label. Another frequent error is having text visually near the field but not programmatically associated. A paragraph 'Your email' placed above an input without a corresponding for/id pairing will be visible on screen but invisible to screen readers. The association must be explicit via the label's for attribute pointing to the field's id, or by wrapping the field inside the label tag. Groups of radio buttons and checkboxes also require special handling: each option must have its individual label, and the entire group should be wrapped in a fieldset with a legend describing the question. Without fieldset/legend, the screen reader announces 'radio button, Yes' without context — the user does not know what question 'Yes' answers.

Does your site have this issue?

106 RGAA criteria analyzed in 5 minutes by our AI.

Test your site for free

Impact on users

For a screen reader user, a form without labels is a form they cannot fill out correctly. They must guess which field corresponds to which information based on field order, which leads to errors. They may enter their name in the email field, their address in the phone field — all errors that result in failed submissions or incorrect data. Voice control users are also affected: they say 'Click on Email' to place the cursor in the email field, but if the field has no associated label, the command does not work. People with cognitive disabilities benefit from labels clearly associated with fields. The absence of labels increases cognitive load and form abandonment rates. On an e-commerce site, a checkout form without accessible labels can lead to direct revenue loss by excluding part of the customer base.

Code example

Before (non-compliant)

<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <p>Do you accept the Terms of Service?</p>
  <input type="radio" name="tos" value="yes"> Yes
  <input type="radio" name="tos" value="no"> No
  <button type="submit">Submit</button>
</form>

After (compliant)

<form>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" autocomplete="name">
  </div>
  <div>
    <label for="email">Email address</label>
    <input type="email" id="email" name="email" autocomplete="email">
  </div>
  <fieldset>
    <legend>Do you accept the Terms of Service?</legend>
    <label>
      <input type="radio" name="tos" value="yes"> Yes
    </label>
    <label>
      <input type="radio" name="tos" value="no"> No
    </label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

Frequently Asked Questions

Can I use aria-label instead of a visible label?

Technically yes, aria-label provides a label to screen readers. But a visible label benefits all users: it helps people with cognitive disabilities, mobile users who need to know which field they are filling, and it increases the click area (clicking the label focuses the field). Use aria-label only when the design truly cannot accommodate a visible label.

Can the placeholder replace the label?

No. The placeholder disappears when the user types, causing a memory problem. It is not reliably announced by all screen readers. Its contrast is often insufficient. WCAG does not accept the placeholder as a valid label. Use a proper label and the placeholder only as a supplement (expected format example).

How do I associate a label with a form field?

Two methods: 1) The for attribute: <label for="email">Email</label><input id="email">. The field's id must match the label's for. 2) Nesting: <label>Email <input type="email"></label>. The field is inside the label, the association is automatic. The first method is generally preferred as it offers more layout flexibility.

When should I use fieldset and legend?

Use fieldset and legend for groups of radio buttons, checkboxes, and any group of fields related by a common question or topic. The legend describes the common question ('What is your age range?') and each label describes the individual option ('18-25 years'). Without fieldset/legend, the screen reader announces options without context.

Does your site have this issue?

Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.

Run a free audit