React fix guide
Fix Missing form labels on React
Placeholder text is not a substitute for labels.
This page ties the generic issue to how it usually shows up in React markup and tooling, then walks you through a fix and verification loop.
Verify on a live URL
Scan, fix, deploy, then rescan the same address to compare reports.
Main issue guide: Missing form labels →
At a glance
Instructional
No associated label
Placeholder is not a replacement for a label.
Label linked to field
Screen readers announce the label; placeholders alone are fragile.
Where this comes from on React
Controlled inputs in shared form components, floating-label patterns without programmatic names, or headless forms.
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 snippet
<label htmlFor="email">Email</label> <input id="email" name="email" type="email" autoComplete="email" />
Common mistakes on React
- Assuming visible floating text is enough without `htmlFor`/`id`.
- Fixing Storybook but not production props.
- Conditional roles that differ between tests and prod.
How to verify the fix
- Run `npm run build && npm start` and test the production bundle.
- Tab through the component; check the accessibility tree in devtools.
- Rerun the scan on the deployed or staging URL.
Related: 3.3.2 Labels or Instructions.
Same issue on other platforms
Related issues
Guides
Next steps
- Run a scan on staging or production.
- Re-read the main issue page for context and WCAG notes.
- React and Next.js accessibility hub for more platform resources.
TestAccessibility · React fix · localhost:3001