What makes a form accessible?

An accessible form can be filled in by everyone, including people who use a screen reader, a keyboard instead of a mouse, a magnifier or a small screen. In practice that means visible labels connected to their fields, a form that works fully with a keyboard, errors that explain what to fix in words, enough contrast and room to zoom.

Is placeholder text enough as a label?

No. Placeholder text disappears as soon as someone starts typing, is often hard to read because of low contrast and isn't always read out properly by screen readers. Use a real label that stays visible, and use a placeholder only for an example, if at all.

How can I test my form for accessibility?

Start by filling it in with only your keyboard, zooming in to twice the normal size and making a mistake on purpose to see how the error comes across. Then try a screen reader and run an automated checker. Automated tools find many issues but not all, so testing by hand and with real users is still worth it.

Does an accessible form help people without a disability?

Yes. Clear labels, helpful errors, good contrast and autofill make a form quicker and easier for everyone, for example on a phone in bright light, with one hand free or in a hurry. Accessibility mostly comes down to good, clear design.

How to make an accessible form that everyone can fill in

A form is a small conversation. You ask, someone answers. But if that someone can't see the question, can't reach the button or doesn't understand why their answer was rejected, the conversation ends before it starts. They don't complain. They just leave.

That happens more often than you might think, and not only to people with a disability. Someone who uses a screen reader, someone who navigates by keyboard, someone with a tremor, someone who's colour-blind, or simply someone filling in your form on a phone in bright sunlight with one hand: they all run into the same rough edges. The good news is that most fixes are small, and they make the form nicer for everyone.

Give every field a visible label

Every field needs a label that says what to fill in, and it should stay visible while people type.

Don't rely on placeholder text. Grey text inside a field disappears as soon as someone starts typing, so they can't check what the field was for. It's often low in contrast too. Use a real label above the field and keep the placeholder for an example, if you use it at all.
Connect the label to the field. In the code, the label should be linked to its field, so a screen reader reads "Email address" when someone lands on it. A bonus: clicking the label then puts the cursor in the field, which gives people a bigger target.
Group questions that belong together. A set of radio buttons or checkboxes needs a group label that holds the question, such as "How would you like us to contact you?". Without it, a screen reader user only hears "Email, Phone, Post" without knowing what's being asked.
Keep labels short and clear. "Your email address" beats "Contact details (primary)". If you need to explain more, put a short hint under the label.

Make instructions easy to find

Instructions only help if people see them in time.

Put hints before the field, not after. If a password needs a certain length or a date needs a certain format, say so between the label and the field, and connect the hint to the field so screen readers read it too.
Mark required fields in words. An asterisk on its own is easy to miss and doesn't explain itself. Write "required" or "(optional)", whichever you need less often, and say at the top what you use.
Don't hide important information in a tooltip. Something that only shows on hover is hard to reach by keyboard and on a touch screen.

Make the whole form work with a keyboard

Many people never use a mouse: people who are blind, people with limited hand movement, and plenty of power users too. Your form should work completely with the Tab key, the arrow keys, the space bar and Enter.

A logical order. Tab should move through the fields in the order people read them, top to bottom.
A visible focus. People need to see where they are. Never remove the focus outline without putting a clear alternative in its place.
No traps. Pop-ups, date pickers and custom dropdowns are where people most often get stuck. Check that you can open them, use them and close them again with only the keyboard.
Look after focus when the screen changes. If your form shows one question at a time, or opens a new step, move the focus to the new question so screen reader users know something changed.

Write errors that help

An error message should feel like a friendly hand on the shoulder, not a red stamp.

Say what to do now. "That email looks incomplete. Could you check it?" helps. "Invalid input" doesn't.
Show the error next to the field, and connect it to the field, so it's read out when someone goes back to fix it.
Don't use colour alone. A red border means nothing to someone who can't see red. Add an icon and, above all, words.
Keep what people typed. Nobody should lose their answers because of one mistake.
For longer forms, add a short summary at the top with links to each field that needs attention, and move the focus there after sending.
Don't shout while people are still typing. Check a field when someone leaves it or sends the form, not after every key.

Mind contrast and colour

Light grey text on a white background looks calm, but it's hard to read for many people, and on a phone in the sun for almost everyone.

Text needs enough contrast with its background. The widely used WCAG guidelines ask for a contrast ratio of at least 4.5 to 1 for normal text.
Field borders and buttons count too. People need to see where a field starts and ends. WCAG asks for at least 3 to 1 for the edges of controls like fields and checkboxes.
Check both themes. If your form has a dark mode, check the contrast there as well.
Never let colour carry the meaning on its own, not for errors, not for required fields and not for the selected option.

Leave room to tap, zoom and autofill

Make targets big enough. Small checkboxes and tiny links next to each other are hard to hit with a finger or a shaky hand. Clickable labels help a lot here.
Let people zoom. Don't block zooming on mobile, and check that the form still works when the text is enlarged, without parts disappearing off the side.
Use the right field types and autofill. An email field that brings up the email keyboard and fields that the browser can fill in automatically save typing, which helps people with limited hand movement or a memory that doesn't cooperate.

No rush and no surprises

Avoid tight time limits. If a session has to expire, warn people beforehand and let them ask for more time.
Don't change things without warning. Choosing an option shouldn't suddenly send people to another page or submit the form.
Be careful with puzzles. A CAPTCHA can be impossible for people with visual or cognitive impairments. We wrote about friendlier options in Stop form spam without annoying real people.
Say what happens after sending. A clear thank-you message, also announced to screen readers, tells people their answers really arrived.

Test it yourself, in ten minutes

You don't need to be an expert to find the biggest problems.

Put your mouse away and fill in the whole form with only the keyboard. Can you reach everything, see where you are and send it?
Zoom in to twice the normal size. Is everything still readable and usable?
Make a mistake on purpose. Is it clear what went wrong and how to fix it, without relying on colour?
Try a screen reader, such as VoiceOver on a Mac or iPhone or NVDA on Windows. Do you hear a clear question for every field?
Run an automated checker. It finds things like missing labels and low contrast quickly, but it can't judge everything, so it doesn't replace the steps above.

And if you can, ask a few people who use assistive technology every day to try your form. They'll find things no checklist can.

A quick checklist

Every field has a visible label that stays put and is connected to the field.
Related options are grouped under a clear question.
Hints come before the field; required or optional is written in words.
The whole form works with a keyboard, with a clearly visible focus.
Errors say what to fix, appear next to the field and don't rely on colour.
People keep what they typed after an error.
Text and field borders have enough contrast, in every theme.
The form works when zoomed in and on a small screen.
Fields use the right types and support autofill.
No tight time limits, no surprise page changes, and a clear confirmation at the end.

These steps cover the most common problems, but they're not a full accessibility audit. If your form has to meet a legal or contractual standard, have it checked properly.

How we're thinking about this at Cuppaform

Cuppaform is still being built, and we'd like accessibility to come with the form, not as an extra you have to remember. We check the pages of this website, including the waitlist and contact form, with an automated accessibility tool in light and dark mode. As we build the form builder, we're working on sensible defaults: visible labels, clear error messages in plain words and forms that work with a keyboard.

You can try the demo and see what a friendly form feels like from the other side.