React fix guide
Fix Missing form labels on React
Placeholder text is not a substitute for labels.
Check your live page
Canonical issue page: Missing form labels →
What this issue means
What this issue is
Every input needs an accessible name, usually via `<label for>` wrapping, or `aria-label` when design constraints require it.
Fixes
Prefer visible labels. If space is tight, use persistent labels or aria-labelledby pointing to visible text.
How to fix on React
Floating labels still need a programmatic name; test with the accessibility tree.
How to fix
Associate every input with a visible label, aria-labelledby, or aria-label when design constraints require it.
Surface errors next to fields and link them with aria-describedby.
Code example
<label htmlFor="email">Email</label> <input id="email" name="email" type="email" autoComplete="email" />
Related: 3.3.2 Labels or Instructions.
Other platforms
Related guides
TestAccessibility · Programmatic fix page · localhost:3001