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).

Related fixes