To fix inaccessible forms, associate every input with a visible <label> (using for and matching id), mark required fields clearly, write descriptive error messages linked with aria-describedby, group related fields with <fieldset>, and ensure all fields are keyboard-operable. Re-scan after fixes.
Forms without labels, clear errors, or logical structure block screen reader users and confuse everyone. Accessible forms are better forms — higher completion rates and WCAG compliance.
Check your website
See how your site handles how to fix inaccessible forms — free, no account needed.
Business impact
Contact, signup, and checkout forms are where conversions happen. If assistive technology users cannot complete them, you lose customers and may face legal complaints. Label and error fixes are usually quick once identified.
Why this happens
Failures: placeholder used instead of label; missing for/id association; errors only shown in red colour; required fields not announced; custom selects not keyboard accessible. Fix: explicit labels, aria-required, aria-invalid + aria-describedby on errors, fieldset/legend for radio groups.
How to confirm the issue
Manually: click the label text — does focus move to the field? Use VoiceOver/NVDA on the form. Submit empty — are errors announced?
With Plexa Trust: "Form Inputs Missing Labels"; re-scan after fixes.
Step-by-step fix
Add a
<label for="field-id">for every input, textarea, and select.Never rely on placeholder alone — it disappears when typing.
Mark required fields with visible text and
aria-required="true".Link error messages with
aria-describedbyandaria-invalid="true".Group radio/checkbox sets in
<fieldset>with<legend>.Test with keyboard and a screen reader; re-scan.
Platform-specific fixes
WordPress
Contact Form 7 / Gravity Forms / WPForms have accessible defaults — avoid stripping labels.
Custom themes: ensure comment and search forms include labels (can be visually hidden with CSS).
Shopify
Checkout is accessible by default; custom contact forms in themes need label audit.
Edit theme form snippets to include proper label elements.
HTML / React
Use <label htmlFor="email"> with matching id on input.
For visually hidden labels: class="sr-only" pattern, not placeholder-only.
Announce errors in a live region: role="alert" or aria-live="polite".
How to verify the fix
Clicking the label should always focus the field.
Errors should explain how to fix, not only what is wrong.
Do not disable browser autofill without good reason.
Common mistakes
Placeholder text as the only label.
Colour-only error indication (red border with no text).
Custom dropdowns that break keyboard and screen reader access.
Frequently asked questions
Can labels be visually hidden?
Yes, with CSS that hides visually but keeps them available to screen readers — better than no label.
What about aria-label instead of label?
Prefer visible or visually-hidden label elements. aria-label is a fallback for icon-only inputs.
How do I mark required fields?
Visible "(required)" text, required attribute, and aria-required="true".
How should errors work?
Clear text message, aria-invalid on the field, aria-describedby pointing to the error element.
Are CAPTCHAs accessible?
Many are not. Use accessible alternatives (honeypot, reCAPTCHA v3, hCaptcha with audio).
What about date pickers?
Ensure keyboard operation and screen reader announces selected date; native input type="date" is often best.
Do search boxes need labels?
Yes — visible or aria-label="Search".
How do I confirm it worked?
Screen reader reads each field name; Plexa Trust label finding clears on re-scan.
Think you've fixed it?
Run a free scan to verify the issue is resolved. Upgrade to Pro on Plexa Trust for the full audit, monitoring alerts, and score history.
Verify with a free scan