Making Delivery Slot Pickers Accessible
Delivery slot pickers compress a week of times into grids of tiny cells, greyed out options, and colour coded availability. A pattern shoppers can actually book with.
Choosing a delivery slot should be the easiest step in checkout. Instead, shoppers meet a dense grid where available slots are green, full slots are grey, selected slots are outlined, and none of that meaning exists outside colour and position. Keyboard users often cannot reach half the grid at all.
A slot picker is a table of choices, and it can be built like one. This guide covers the structure: real controls, meaning in text, and selection that is announced and reversible.
Build slots as real, labelled controls
Each available slot should be a real button or radio option with a complete label: the day, the date, and the time window, read as one phrase. A label that says only 10 to 12 forces a screen reader user to reconstruct which day the cell belonged to from grid position they cannot see.
Unavailable slots should be marked unavailable in text and removed from the tab order or properly disabled, not merely greyed. A grey cell that can still be focused and says nothing useful is a trap dressed as information.
Never let colour carry availability alone
Green, grey, and outlined are a colour code, and colour codes fail colour blind shoppers, high contrast modes, and anyone on a washed out screen in daylight. Availability, selection, and price differences for premium slots must all exist as text or symbols with text equivalents.
A short line above the grid helps everyone: slots shown for the week of a stated date, with the number of available windows. Orientation text costs one sentence and removes a whole class of confusion.
Announce selection and show the summary
Choosing a slot should produce a clear summary that persists: your delivery is booked for a named day and window, shown near the picker and repeated at review. Screen reader users need that selection announced when made, not only displayed in a changed cell colour.
Changing a slot must be as easy as choosing one, with the summary updating each time. A picker that locks the first accidental selection behind a restart of checkout punishes exactly the exploration shoppers need to compare options.
Handle full days and navigation between weeks
Moving between weeks needs labelled controls that say which week they lead to, and the grid should keep a stable heading structure per day. Arriving on a new week with no announcement of the dates now shown strands keyboard users in an unlabelled grid.
Fully booked days should say so in their heading or an adjacent note. An empty column of disabled cells with no explanation reads as a broken page, in any technology.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Accessible Star Ratings and Review Widgets, Making Gift Wrap and Gift Message Options Accessible, and Making Sale and Clearance Pages Accessible Under Time Pressure.
Frequently asked questions
What should a delivery slot label include?
The full day, date, and time window as one readable phrase. Screen reader users cannot infer the day from grid position, so each slot must carry its own complete meaning.
How should unavailable slots be handled?
Marked as unavailable in text and either disabled properly or removed from keyboard focus. Grey styling alone communicates nothing to assistive technology or colour blind shoppers.
Why repeat the chosen slot in a summary?
Because selection shown only as a changed cell colour is invisible to many shoppers. A text summary near the picker, repeated at order review, confirms the booking for everyone.
What makes week navigation accessible?
Controls labelled with the week they lead to, an announcement or heading that states the dates now displayed, and a consistent grid structure so the new week reads like the last one.