Online booking and appointment widget accessibility: a 10-minute test for small businesses
How to check that customers can book with your online scheduler using only a keyboard, a screen reader or a phone, which WCAG 2.2 criteria matter most, what to ask your booking vendor, and why you should keep a phone option.
Online booking saves staff time, but if it's the only way to book, anyone who can't use your scheduler is turned away. That includes an older customer who doesn't use a smartphone, someone who navigates by keyboard or a screen reader, and someone on a slow phone connection. Most booking tools are third-party widgets (Square, Calendly, Mindbody, Vagaro, Zocdoc, OpenTable and many others), so you don't control their code, but you do control how you test them, what you ask the vendor, and what alternative you offer.
1. Always offer another way to book
Put a phone number (as real text, not an image) and an email address right next to the booking button, and say plainly that people can book that way too. Mention it in your accessibility statement. A front desk that says "online bookings only" to someone in person creates the same barrier offline.
2. The 10-minute booking test
Put your mouse aside and try to book one real appointment with the keyboard only (Tab, Shift+Tab, Enter, Space, arrow keys, Escape). Then try again on your phone with the screen zoomed in. Check each point:
- You can reach every step. Service, staff member, date, time, your details and the confirm button all work by keyboard (WCAG 2.1.1 Keyboard).
- You can see where you are. There's a visible focus outline, and it isn't hidden behind a sticky header, cookie banner or chat bubble (2.4.11 Focus Not Obscured).
- Date and time slots are real buttons with names. A screen reader should hear "Wednesday 4 November, 2:30 PM, available", not "button" or "30". Ask the vendor if it doesn't (4.1.2 Name, Role, Value).
- Time slots are big enough to tap. At least 24 by 24 CSS pixels, or spaced out enough (2.5.8 Target Size).
- Every field has a visible label, not just placeholder text (3.3.2 Labels or Instructions).
- Errors say what's wrong in words, such as "Enter a 10-digit phone number", not just a red border (3.3.1 Error Identification).
- The booking doesn't time out without warning. If a slot is held for a few minutes, people should be told and be able to ask for more time (2.2.1 Timing Adjustable).
- No re-typing. Details already entered (name, phone) aren't asked for again in the same booking (3.3.7 Redundant Entry).
- Login and CAPTCHA don't block people. Password managers and paste work, and there's an option that doesn't rely on a puzzle (3.3.8 Accessible Authentication; see our login and CAPTCHA guide).
- The confirmation is announced, so a screen reader user knows the booking went through, and they get it by email or text too (4.1.3 Status Messages).
3. Fix what you control
Some problems sit on your own page around the widget. These are the ones you can fix today:
<!-- A real, named booking button, plus a phone alternative --> <a class="btn" href="https://book.example.com/your-business">Book an appointment online</a> <p>Prefer to book by phone? Call <a href="tel:+19185550100">918-555-0100</a>.</p> <!-- If the scheduler is embedded in an iframe, give it a title --> <iframe src="https://book.example.com/embed" title="Online booking calendar"></iframe>
Also make sure a cookie banner or chat pop-up doesn't cover the booking button, and that the button text has enough contrast (check it with our free contrast checker).
4. What to ask your booking vendor
- "Do you have an accessibility conformance report (VPAT) for the booking page customers use?" (see our VPAT guide)
- "Which WCAG version and level do you aim for, and what known issues are there?"
- "Can customers book with a keyboard and screen reader, and can I turn off any CAPTCHA or slot timer?"
Write down the answers and the date. If the tool fails the test above and the vendor has no plan, that's useful information when your contract comes up for renewal.
What an automated scan can and can't tell you
An automated scan, including ours, can flag missing labels, unnamed buttons, low contrast and an iframe with no title on your own pages. It usually can't test a multi-step booking flow inside a third-party widget, and it can't judge whether the flow makes sense to a screen reader user. The 10-minute keyboard test above covers that part.
Related: salon and spa websites, medical clinic websites, restaurant websites, 5-minute keyboard test.
Want the fixes written for you?
Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.
This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.
Related guides
- Accessible navigation menus: hamburger and dropdown menus that work for everyone
- WCAG 2.2 explained for small-business websites
- Squarespace accessibility fixes: alt text, contrast, forms and more
- Wix accessibility fixes: a practical checklist
This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.
Check your own site
Run a free homepage snapshot to see your top 3 issues in about a minute, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes for your platform.