How to Fix Missing Form Labels
Associate labels with form controls to satisfy WCAG 1.3.1 and 4.1.2. Covers the label element, aria-label, and why placeholders aren't enough.
Last updated
Form fields without programmatically associated labels are a serious barrier: screen-reader users may reach an input with no idea what it's for. Placeholder text alone doesn't solve this — it disappears on input and is inconsistently announced.
This guide is informational and not legal advice.
How to fix it
1. Use a real <label> linked by for/id
<!-- Before -->
<input type="email" placeholder="Email address">
<!-- After -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="[email protected]">
The for attribute must match the input's id. This also enlarges the click target — tapping the label focuses the field.
2. Or wrap the input in the label
<label>
Email address
<input type="email">
</label>
3. When a visible label isn't possible, use aria-label
For something like a search field with only an icon:
<input type="search" aria-label="Search products">
Prefer a visible label whenever you can — it helps everyone, not just screen-reader users.
4. Group related fields
Use <fieldset> and <legend> for radio groups and checkbox sets so their shared purpose is announced.
A note on errors
Pair good labels with clear, text-based error messages tied to their fields (via aria-describedby) so users know exactly what to fix.
How to verify
Tab through the form with a screen reader. Every control should announce a clear name and its current state.