How do I make my website forms accessible?
Give every field a visible label, mark required fields in words, let people fill in contact details automatically, explain errors in plain text next to the field, and make sure the whole form works with a keyboard alone. Avoid image puzzles. Then test it yourself with the keyboard, a phone and a free checker.
The short version
- Every field needs a visible label that stays visible while people type.
- Say “required” in words, not just with a red star.
- Turn on autocomplete for name, email, phone and address.
- Put error messages in plain words beside the field, and list them at the top.
- Test with the keyboard alone: Tab through, fill in, and send.
How do I check and fix my forms?
The W3C’s forms tutorial is the reference for everything below. It was last updated in March 2026. Most fixes are settings in your form plugin or small changes to the form’s text. This isn’t legal advice on accessibility law; our article on website accessibility basics covers the wider picture.
1. Labels that stay visible
Each field needs a label, tied to the field in the code, that names what goes in it. Placeholder text inside a box is not a label: it disappears when someone starts typing, and it’s often too faint to read. Most form plugins have a setting for label placement. Choose labels above the fields.
Group related choices, such as radio buttons, with a question that applies to the group. The W3C calls this grouping with a fieldset and legend, and good form plugins do it for you.
2. Clear instructions and required fields
Put any instructions before the field, not after. If a phone number needs a certain format, say so in the label or a hint. Mark required fields with the word “required,” or explain at the top that every field is required unless marked optional. Color alone, such as a red star, isn’t enough.
3. Autocomplete for contact details
WCAG 2.2 Success Criterion 1.3.5, Identify Input Purpose, asks that fields collecting details about the user expose their purpose in code. In practice that’s the HTML autocomplete setting for name, email, phone and address. It lets browsers fill fields in, which helps people with memory, motor or vision difficulties, and everyone on a phone. Many form plugins have an autocomplete option per field. Turn it on for every contact field.
4. Errors people can fix
The W3C’s guide to user notifications sets out what good error handling looks like:
- a summary at the top of the form listing each problem, linked to the field;
- a message beside each field that says what’s wrong and how to fix it;
- focus moved to the first field with an error after a failed send;
- text, not only color or an icon.
“Please enter a phone number with area code” helps. “Invalid input” doesn’t. Check your plugin’s validation messages and rewrite any vague ones.
5. A clear success message
After sending, show a plain confirmation: “Thanks, we’ve got your message. We’ll reply by the end of the next business day.” The same W3C guide suggests putting that message in the page heading, so screen reader users hear it right away.
6. No puzzles, no time limits
Image and audio CAPTCHAs block many disabled people; the W3C’s note on the inaccessibility of CAPTCHA explains why. Use quiet checks instead; see whether CAPTCHAs hurt accessibility and privacy. The forms tutorial also advises avoiding time limits, or letting people extend them.
7. Don’t ask twice
In longer or multi-step forms, don’t make people re-enter what they already gave. WCAG 2.2’s Redundant Entry criterion, at Level A, asks that it be filled in for them or offered to select. Our guide to quote request forms covers multi-step forms.
How do I test a form myself?
- Keyboard only. Put the mouse aside. Press Tab to move through the form. Can you see where you are at every step? Can you tick boxes with the space bar and send with Enter?
- Make mistakes on purpose. Leave a required field blank and send. Is the error clear, and does it say how to fix it?
- Zoom in to double size. Does the form still fit and work?
- Use a phone. Does the right keyboard appear for email and phone fields? Does autofill work?
- Run a free checker. Tools like WAVE and Lighthouse catch missing labels and low contrast. They can’t judge whether your messages make sense. See free accessibility checkers and their limits.
Why does this matter?
A form people can’t complete is a lead you never hear about. Many people who never think of themselves as disabled still benefit. Older customers with weaker eyesight, someone using a phone in bright sun, and someone with a broken wrist all need clear labels and autofill. Accessibility is also the law in many situations, which is why owners ask about it.
What are the common mistakes?
- Placeholder text instead of labels.
- Light gray text on white, too faint to read.
- “Invalid” as the only error message.
- Custom drop-downs or date pickers that can’t be used with a keyboard.
- An image CAPTCHA added to stop spam.
- A cookie banner covering the form on phones, with no way to close it by keyboard. See accessible cookie banners.
What if my plugin can’t do this?
Most current form plugins handle labels, grouping and error messages well when set up properly. Problems usually come from custom styling or a theme that hides labels. If a fix needs code, ask your web team. If the plugin itself can’t produce accessible forms, that’s a reason to switch; see choosing a form plugin.
How much does it cost, and how long does it take?
Checking a form with the keyboard and a free tool takes about 15 minutes. Most fixes are settings and wording, an hour or so per form. Fixing a theme’s styling or a custom field can take longer.
How does E-3 handle this?
When we build or change a form, we avoid image puzzles for spam protection, and changes to a live site are made on a staging copy first. Whoever builds it, a test with only a keyboard, on a phone and with a screen reader is the way to know it works. For a site-wide accessibility review, see our website care service.
Related questions
Sources
Next step
- Next: Should I use online booking instead of a contact form?The next guide in Forms and lead follow-up.
- Free website checkPublic checks on your own site, then an action plan of what to fix first.
Still stuck? Ask E-3 for an answer from our help guides.
Rather we handled forms and lead follow-up for you?
It’s part of what we do every week for small businesses, as part of leads and highlevel. Start with a free check of your site and profile, or call and ask.