Fix Form Inputs Missing Labels (Accessibility)

What this means

Why it matters

How to fix it

1. 1

   Add a real label tied by for/id

   The canonical fix: give the control a unique id and point a <label for="..."> at it. It works everywhere, needs no ARIA, and makes the visible text clickable to focus the field. Example: <label for="email">Email address</label><input id="email" type="email" name="email">. Every id must be unique on the page; duplicate ids break the association silently.

2. 2

   Or wrap the input inside the label

   When you can't add matching id/for pairs, for instance in a component that generates ids you don't control, nest the control inside the label: <label>Email address <input type="email" name="email"></label>. The association is implicit, so no for or id is required. This is often the cleanest option in JSX and React component libraries.

3. 3

   Use aria-label or aria-labelledby when no visible label fits

   For controls with no visible text label, such as a search box or a filter dropdown, add aria-label="Search products" directly to the control. If descriptive text already exists elsewhere on the page, reference its id with aria-labelledby instead of duplicating the string. Do not use placeholder as the name; keep it as a hint and add the real label separately.

4. 4

   Add autocomplete and the right type while you're in the markup

   Since you're editing each field, set the correct autocomplete token (email, name, tel, street-address, and so on). This improves browser autofill and satisfies WCAG 2.1 SC 1.3.5 (Identify Input Purpose) for fields that collect user information. Pair it with the right input type (email, tel, url, number) so mobile keyboards and validation behave correctly.

5. 5

   Fix it at the template level for repeated forms

   Most unlabeled fields come from one template, theme, or plugin rendering the same form site-wide, so fixing the source clears many findings at once. Contact forms, header search widgets, and newsletter blocks are the usual culprits. See the platform steps below for WordPress form plugins, Shopify, Wix, and Squarespace.

6. 6

   Re-scan and verify in the accessibility tree

   Re-run this audit and confirm the count drops to zero. Then check in Chrome DevTools: open the Elements panel, select the input, and open the Accessibility pane. The Name field should show your label text and its source. Lighthouse's 'Form elements do not have associated labels' audit should also pass.

Example

<!-- 1. Best: explicit label via for/id (visible, clickable) -->
<label for="user-email">Email address</label>
<input id="user-email" type="email" name="email"
       autocomplete="email" required>

<!-- 2. Implicit label: wrap the input (no id needed) -->
<label>
  Full name
  <input type="text" name="name" autocomplete="name">
</label>

<!-- 3. No visible label (e.g. search box): visually-hidden real label -->
<form role="search">
  <label for="q" class="sr-only">Search</label>
  <input id="q" type="search" name="q" placeholder="Search...">
  <button type="submit">Go</button>
</form>

<!-- WRONG: placeholder is not a label -->
<input type="email" placeholder="Email address">

<!-- CSS for the visually-hidden pattern (keeps it in the a11y tree) -->
<style>
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
</style>

Three valid ways to label a control, the wrong way, and a visually-hidden label.

Platform-specific steps

Frequently asked