Accessible forms work for everyone: people using a screen reader, people who navigate with a keyboard, people with low vision and people on a cracked phone in bright sun. Good form accessibility also makes forms faster for everybody else. This guide is ideal for beginners and for teams fixing an old site. We cover the rules that matter most, with fixes you can make in an afternoon.
The short version
- Every field needs a visible label, tied to the field.
- Errors must say what is wrong and where, in words, not only in red.
- Everything must work with a keyboard, in a sensible order.
- Text and borders need enough contrast to read.
Why do accessible forms matter?
Because a form nobody can finish is a form that does not work. More than 1 in 4 adults in the United States, 28.7%, has a disability, according to the CDC, and many more have a temporary injury, an old device or a slow connection. In some places accessibility is also a legal requirement for business websites.
The same rules apply whether you build in WordPress, in Elementor or by hand. There is a practical benefit too. The habits that help a screen reader user, such as clear labels and plain errors, help every visitor finish faster.
What do WCAG forms need?
The W3C forms tutorial explains the Web Content Accessibility Guidelines for forms in detail. These are the rules that fix most problems:
| Rule | Why it matters | The fix |
|---|---|---|
| A label on every field | Screen readers announce it, and everyone sees what to type | Show labels above fields, not only as grey placeholder text |
| Clear errors | People need to know what went wrong and where | Name the field and the problem in words |
| Keyboard access | Some people never use a mouse | Every field and button reachable with Tab, in order |
| Contrast | Low vision and bright screens | Dark text, visible borders, a 4.5 to 1 contrast ratio for text |
| Enough time | Some people type slowly | No timers that clear the form |
Why are placeholders not enough?
Because they disappear. Placeholder text vanishes the moment someone types, so people forget what the box was for. It is also usually pale grey, which fails contrast for many readers. Use a visible label above every field, and keep placeholders for examples, such as you@example.com.
In Echo Forms, labels show by default. You can hide one on screen when the placeholder already says it all, such as a single Search box, but keep that rare.
How should form errors work?
An error should say what is wrong, where, and how to fix it. Please fill out this field under the phone box is better than a red border alone, because color by itself tells a color-blind visitor nothing. Echo marks the missing field and shows a message beside it when someone presses send, and you can write your own message per field, such as We need a phone number to confirm your booking.
How to check a form’s accessibility, step by step
- Unplug your mouse. Press Tab through the whole form and send it with the keyboard only.
- Read every label out loud. Does each one make sense on its own?
- Send it empty. Does each error name the field and the problem?
- Zoom to 200%. Does everything still fit and work?
- Try a screen reader, such as VoiceOver on a Mac or iPhone, or NVDA on Windows, for 10 minutes.
- Check contrast with a free tool such as the WebAIM contrast checker, which takes about 5 minutes in Chrome.
The whole check takes about 30 minutes for one form, and it catches most problems.
Are multi-step and conversational forms accessible?
They can be, if each step has a clear heading and the progress is announced in words, such as Step 2 of 4. Keep the Back button, so people can check earlier answers, and never move focus somewhere unexpected. Test them with a keyboard the same way as a single page.
What about CAPTCHAs?
Puzzles are one of the biggest barriers for people with low vision or a cognitive disability. Use invisible checks first: Echo’s hidden field and timer stop most bots with no puzzle at all. If you must add a CAPTCHA, choose one with an audio or a no-puzzle option. Read our guide to stopping form spam for the order to add checks.
Accessible forms are not a separate kind of form, just a well-made one. Fix the labels, the errors and the keyboard path, and you will help every visitor, not only the ones you had in mind. You can start from a template with labels already in place, then follow the Echo Forms guides for the rest.
Forms with real labels and clear errors
Echo Forms shows every label by default and marks what is missing before anyone resends.
