How to fix: placeholder used as label

What it looks like in the wild

Once typing starts, the field has no visible label.

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

Cognitive and screen-reader users lose context.

The wrong pattern (avoid)

<input type="text" placeholder="First name">

The right pattern (copy this)

<label for="fn">First name</label>
<input id="fn" type="text" autocomplete="given-name">

Notes from real audits

• Float-label patterns are acceptable if the visible label remains.

Related fixes