acc
How to fix: Form label associations (WCAG 1.3.1, 3.3.2 A)
Why this matters
An unlabelled input is an unfillable input for screen-reader users — they hear 'edit text' with no context about what to type. WCAG 1.3.1 requires programmatic name; 3.3.2 requires visible labels. Use <label for=id>, aria-label, or aria-labelledby.
Background
Every form input needs an accessible name. Without it, screen-reader users hear 'edit text' with no context. Multiple ways to provide one: <label for=id>, aria-label, aria-labelledby, or implicit <label>text<input/></label>.
References
WCAG 2.1 SC 1.3.1 Info & Relationships (A) · SC 3.3.2 Labels or Instructions (A)
How to fix
Code snippet for each stack we cover. Pick the one matching your server / framework.
nginx
No server config — template change.
apache
Same.
cloudflare
Same.
wordpress
Most form plugins (Contact Form 7, WPForms) emit labels by default. Verify custom code (theme functions, custom blocks) follows the pattern.
flask
wtforms generates labels automatically. Verify custom HTML forms.
express
Use a form library (express-validator + a template helper) that includes labels.
rails
form_with f.label :name + f.text_field :name — Rails handles label association automatically.
Verify it's working
Tab through your form with keyboard. Each focused field should announce a label.
Want to know if your site has this issue?
Run a free 53-check audit — security, GDPR, NIS2, and technical SEO.
Audit my site →