Accessible Date Pickers for Booking Websites

The calendar is the heart of a booking website, and it can also be the part that shuts people out. A widget designed only for a mouse may have tiny day numbers, colour as the only sign that a day is full and no way to move between days with a keyboard. This guide explains how a date and time picker should behave so that everyone can book, and which standards apply in Canada.

Why it matters legally and practically

In Ontario, any business or non-profit with at least 50 staff in the province, and every designated public body, has needed a public website at WCAG 2.0 Level AA since January 1, 2021, with two exceptions for live captions and pre-recorded audio description¹. WCAG 2.2, published by the W3C in October 2023, adds nine success criteria, several of which apply directly to booking forms². Beyond the law, an inaccessible calendar simply loses bookings from people who use keyboards, screen readers, switch devices or magnification.

The keyboard pattern

The W3C ARIA Authoring Practices Guide publishes a Date Picker Dialog example whose grid supports these keys³:

In that example, only one day in the grid is in the Tab order at a time (a technique called roving tabindex), and only the selected date carries aria-selected="true"³. The grid is a table with the grid role, labelled by the month heading, so a screen reader can announce where the user is.

Unavailable days and times

Booking calendars differ from plain date pickers because some days and times cannot be booked. Show this in text, not colour alone: each unavailable day should be announced as unavailable, and a visible pattern or style should support the colour change. Keep unavailable days focusable but not selectable if you want people to be able to explore the month; if you skip them entirely, make sure arrow keys still move predictably.

Time slots work well as a group of radio buttons with visible text labels such as "10:30 a.m.", inside a fieldset whose legend names the chosen date. A screen reader user then hears the date and the time options together.

WCAG 2.2 criteria that matter for booking

The list of new criteria and their levels comes from the W3C's summary of WCAG 2.2, which also notes that 4.1.1 Parsing was removed as obsolete².

Announcing changes

When a customer selects a date, the available times change. Screen reader users need to know that happened. A polite live region that says "Selected Tuesday, May 11, 2027. 6 times available." lets them know without moving focus unexpectedly. When the month changes, announce the new month and year.

Give people another way

Some users prefer to type a date. Others find calendars hard regardless of how well they are built. Offering a typed date field with a clear format hint, or a simple "next available appointments" list, gives everyone a route. For many services, a list of the next available times is faster than a calendar anyway.

Mobile and zoom

On a phone, a seven-column grid leaves narrow cells. Keep cells at a comfortable size, let the layout reflow at 400 percent zoom without sideways scrolling and keep the selected date and the time list close together so people do not lose their place.

Errors and confirmation

If someone tries to continue without choosing a time, say so in text next to the control and link the message to the field. On the final step, repeat the chosen service, date, time and time zone in plain words before the customer confirms.

Testing checklist

• Complete a booking using only the keyboard.
• Complete a booking with a screen reader on desktop and on a phone.
• Check that focus is never hidden behind a sticky header or banner.
• Zoom to 400 percent and confirm nothing is cut off.
• Check that unavailable days are announced as unavailable.
• Confirm the selected date and time are repeated in text before confirming.

Try our demo

Our booking demo uses the keyboard pattern described here: arrow keys move between days, Page Up and Page Down change months (with Shift, years), Enter selects and a live region announces each change. It is a demonstration only and books nothing.