User Experience Design
Step-by-Step Guide to Creating Accessible Forms
We build accessible enquiry, booking and checkout forms for client websites. This guide is for business owners who want every customer to be able to contact them. It covers form structure, error handling and testing. Use it when you build or review a form, so no customer is blocked from sending an enquiry.
How to structure an accessible form
Forms are where many websites lose disabled customers. Missing labels, unclear instructions and tiny controls create barriers. Good structure solves most of these problems. Follow these steps when you build a form.
- Give every field a visible label placed next to it.
- Connect each label to its field in the code, so screen readers announce it.
- Ask only for information you really need.
- Mark required fields clearly in text, not by colour or symbol alone.
- Group related fields, such as address lines, under a clear heading.
- Use the correct input types, such as email and phone, to help mobile keyboards.
Do not rely on placeholder text instead of labels. Placeholder text disappears when people type and is often low contrast. Shorter forms are also easier for everyone. Our guide to website navigation covers making forms easy to find.
How to handle errors and instructions
Clear instructions prevent errors, and clear error messages help people fix them. Poor error handling is a common reason people abandon forms. Messages must make sense to screen reader users as well as sighted users. Apply these points.
- Explain any format rules before the field, such as date format.
- Show error messages next to the field that needs fixing.
- Describe the problem and the fix in plain words, such as "Enter an email address like name@example.com".
- Announce errors to screen readers when the form is submitted.
- Keep the information people have already entered.
- Confirm success clearly after the form is sent.
Avoid time limits where possible. If you must use one, warn people and let them extend it. Our website accessibility checklist covers wider checks.
How to test your form
Testing shows whether real people can complete the form, whatever their ability. A few simple tests reveal most problems. Test on mobile and desktop. Run these checks.
- Complete the whole form using only a keyboard.
- Complete it with a screen reader and listen to each label and message.
- Submit it with deliberate errors to check the messages.
- Zoom the page to 200% and confirm nothing breaks.
- Complete it on a phone with large text settings turned on.
Fix any step where you get stuck, confused or lost. Ask someone unfamiliar with the form to try it as well. Our usability testing guide explains how to run wider tests.
Accessible form checklist
Use this checklist on every form on your website. Each item removes a common barrier. Re-check forms after any change.
- Visible label for every field
- Labels connected to fields in the code
- Required fields marked in text
- Correct input types for email and phone
- Clear instructions before fields with format rules
- Helpful error messages next to each field
- Tested with keyboard, screen reader, zoom and phone
Good to know
Accessible form FAQs
Why are form labels important for accessibility?+
Labels tell every user what to enter in each field. Screen readers read connected labels aloud, so blind users know what each field is for. Visible labels also help people with memory or cognitive difficulties. Placeholder text alone is not enough.
How should error messages be written?+
Error messages should explain what went wrong and how to fix it. Place them next to the field and use plain words. Avoid messages that rely on colour alone, such as a red border with no text. Make sure screen readers announce the errors.
Do CAPTCHAs cause accessibility problems?+
Many CAPTCHAs create barriers for disabled users, especially visual puzzles. Alternatives include invisible spam filtering and simple honeypot fields. If you use a CAPTCHA, choose one with accessible options. Test it with a keyboard and screen reader.
Keep this checklist with your website forms and test notes. Share it with anyone who builds or edits forms on your site. So you can make sure every customer can get in touch with you.
Last updated