Accessible Online Forms for Booking and Contact Pages
Accessible online forms are how a booking or contact page stays usable when someone cannot see the screen, cannot use a mouse, or cannot tell red from brown. The U.S. Department of Justice lists inaccessible forms as a common barrier: fields without labels a screen reader can speak, instructions that are unclear, and errors that do not say what failed [1].
What has to be on each field?
A label that says what the box is for, in words. "Credit card number" next to the box, not a placeholder that disappears when you type. The Justice Department uses that example because a screen reader user needs the label spoken [1]. The same rule fits a booking form: service, date, name, and phone should be named, not hinted at by a gray sample.
Why is a red border not enough?
Color alone does not carry the message. People who are color-blind may not see which fields you marked in red, and a screen reader does not announce the color [1]. If a field is required, the word "required" has to be there as text, not only as a red asterisk with no explanation.
What should an error say?
What is wrong, and how to fix it. The Justice Department's example is an alert that a date was entered in the wrong format, not a silent failure or a box that just shakes [1]. On a booking form, "Pick a time that is still open" is a fix. "Invalid" is not.
Does the form have to work without a mouse?
Yes. WAI's introduction says some people cannot use a mouse, including many older users, and an accessible site makes the same actions available from a keyboard so assistive tech that mimics a keyboard can drive it [2]. That includes the date picker, the service list, and the submit button. If the only way to open the calendar is a click on a tiny icon, the form is mouse-only.
Where does WCAG fit?
WCAG 2 groups its guidelines under perceivable, operable, understandable, and robust. Forms sit in all four: people have to perceive the label, operate the control, understand the error, and use it with the tools they already have. Conformance is the success criteria, not a vibe [3]. You do not need to recite the numbers to a client. You do need the form to meet them.
When do you test the form?
While you are building it. WAI says evaluating late means repairing work you already shipped, and no automated tool by itself can say the page meets the standard. A person still has to try it [4]. Tab from the top of the booking page to submit. Turn on a screen reader for one pass, or ask someone who uses one. An overlay that claims it fixed the form is not that pass.
- Label — the name of the field stays visible and is tied to the input.
- Required — written in words, not only a color.
- Error — says which field failed and what to type instead.
- Keyboard — you can reach every control and see where focus is.
- Submit — works from the keyboard and does not depend on a hover.
What about the photos and the confirmation page?
Images on the booking page still need a text alternative. WAI's point on alt text is that a screen reader reads it, and so do search engines [2]. Google's image guidance says the alt text should describe the image in context, not a pile of keywords [5]. The confirmation page is part of the form. If it is a dead end of unlabeled icons, the form is not finished.
Should the booking page be blocked from search while you fix it?
A robots.txt disallow does not reliably hide a page. Google says a disallowed URL can still appear in results if something else links to it [6]. Fix the form on the page people use. Do not park a broken form behind a block and leave the old one live.
How does this relate to the booking system itself?
The tool can be capable and the form can still be unusable. Labels and focus are page work, whether the calendar is a product or a booking system built for the business. If clients already abandon the flow, the signs a booking system is losing clients are worth reading next to this. A form that only works for a mouse is one of those leaks. What online booking is for does not matter if the last step cannot be completed. Pricing should include that pass, not treat it as a surprise.
What is the smallest check before you send traffic to it?
Complete a booking with the mouse unplugged, or with the trackpad ignored. Then submit a bad phone number and read the error out loud. If you cannot tell which field failed, neither can a customer using a screen reader [1]. That is the whole test for this week.
Sources & references
- U.S. Department of Justice: Guidance on Web Accessibility and the ADA (18 March 2022).
- W3C WAI: Introduction to Web Accessibility.
- W3C WAI: WCAG 2 Overview.
- W3C WAI: Evaluating Web Accessibility.
- Google Search Central: Google image SEO best practices.
- Google Search Central: Introduction to robots.txt.
Guidance and product screens change. Check the linked page before you treat a line as a legal requirement.
If the booking form is where clients drop off, we can look at the fields and the path through them.
Talk to us arrow_right_alt