Form accessibilityWhat it checks and how to fix it

What it checks

Inspects every form on the page. Each visible input, select and textarea needs a label (a label for=, a wrapping label, aria-label, aria-labelledby or title; a placeholder alone does not count), groups of two or more radios or checkboxes need a fieldset with a legend, and email and password fields need an autocomplete attribute. More than 30% of fields without a label fails; any other issue is a warning; pages without forms pass.

Why it matters

A field without a label is announced by screen readers as just "edit text", so the user cannot know what to type. Placeholders disappear as soon as the user types and are often too low-contrast to read. Missing autocomplete hints stop password managers and autofill, which costs sign-ups and checkouts for every user, not only those using assistive technology.

How to fix it

Give every field a visible label tied to it, group related options, and add autocomplete tokens.

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

<label for="password">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password">

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="monthly"> Monthly</label>
  <label><input type="radio" name="plan" value="yearly"> Yearly</label>
</fieldset>

When the design has no visible label (a search box, for example), use aria-label:

<input type="search" name="q" aria-label="Search the site" placeholder="Search">

In Rails, form.label :email paired with form.email_field :email, autocomplete: "email" produces the right association automatically.