How to fix: form fields without labels

What it looks like in the wild

Screen readers announce "edit text, blank" with no idea what to enter.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Every form input needs a programmatic label. Placeholders disappear when typing — they are not labels.

The wrong pattern (avoid)

<input type="email" placeholder="Your email">

The right pattern (copy this)

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

Notes from real audits

• Visible labels reduce form errors for everyone, not just AT users.

• Use aria-label only when a visible label is impossible (e.g. icon-only search).

How to verify the fix

Shipping the change is not the same as passing 3.3.2 and 1.3.1 and 4.1.2. Re-run these checks against the page you edited before you close the ticket.

• Use a screen reader's heading list (NVDA: H key, VoiceOver: VO+U).

• Inspect tables for <th> and either scope or headers attributes.

• Check every <input> has a programmatic name.

• Empty every input; the label must remain visible.

• Inspect components with the browser accessibility tree (Chrome DevTools → Accessibility).

What 3.3.2 and 1.3.1 and 4.1.2 require

1.3.1 Info and Relationships (Level A, Perceivable): The visual structure of a page (headings, lists, tables, form labels) must also be available programmatically — assistive tech relies on the markup, not the styling. When you style a <div> to look like a heading without using <h2>, screen readers cannot navigate by heading. When form fields are not associated with labels, voice users cannot fill them in. Programmatic structure is the contract between visual design and assistive tech.

3.3.2 Labels or Instructions (Level A, Understandable): Labels or instructions must be provided when content requires user input. Placeholder-only inputs lose their label as soon as the user starts typing — and screen readers vary on whether they announce them at all. Visible labels are the WCAG-compliant default.

4.1.2 Name, Role, Value (Level A, Robust): For every UI component, the name, role, and state (and any value where applicable) must be programmatically determinable. A custom toggle that looks like a switch but is built from <div>s is invisible to assistive tech. WCAG 4.1.2 is the bridge between custom UI and the accessibility tree.

• <div class="title"> styled to look like a heading

  1.3.1

• Visual list (bulleted with images) without <ul>/<li>

  1.3.1

• Data tables without <th> and scope attributes

  1.3.1

• Placeholder used as label

  3.3.2

• Required-field markers shown only with color

  3.3.2

• Date format unstated

  3.3.2

Priority: Serious

This is one of the findings that shows up in demand letters, because the barrier it creates is total rather than inconvenient: the affected user cannot complete the task at all. Treat it as a release blocker, not a backlog item.

Because the cause is almost always a shared component rather than a single page, fix it where the component is defined and re-scan the whole site. Record 3.3.2, 1.3.1, 4.1.2 on the ticket verbatim: that string is what an auditor, a procurement questionnaire or a regulator will search for.