#03. Redesigning a date picker: the case of Lunchclub.

In this issue, we will discuss how one small component can cause much pain, how minor changes can have a tremendous impact, and how accessible design benefits everyone.

In today’s issue.

Today, we are going to redesign a small component and make it more accessible. You will learn:

• How to test components on the web for accessibility, and what are the things you should be looking for;

• Which Figma plugins to use when designing accessible components;

• How to design accessible labels, buttons, and text blocks;

• How to stress-test your design.

What’s wrong?

Wikipedia tells us that Lunchclub is an American social platform that connects users with common interests. Users picks their objectives and aspirations, indicate their availability, and get matched with like-minded strangers. It’s easy, fast, and doesn’t require almost any action: just tap a button to dial in a call at a selected time and chat.

The fun begins when the user decides to change their availability or update their recurring schedule. They proceed to settings, choose “Upcoming meetings”, and see this component pop up:

Guess which day am I looking at right now?

You must be thinking: there are simply too many colours, it’s a quick fix. Your gut won’t be wrong, but there is more to this little lad than meets the eye.

Let's have a closer look, inspect, and make this component accessible.

Having a closer look.

First, let’s open Firefox’s built–in Accessibility console and examine the page. We are immediately welcomed with a number of warnings: missing keyboard control, text labels, colour contrast. Everything that could go wrong, does.

Where shall we begin?

For instance, as we examine the date labels, we notice the “WCAG standards for accessible text” warning. We extract the RGBa value of the colour (168, 171, 180), convert it to hex (#ABB7A8), and check the contrast using a Contrast plugin.

Let’s quickly run a simulation using the Low Vision plugin to visualise how people with moderate vision loss will see the form. The CTAs and the title are somewhat visible, but all date labels have completely vanished.

Color Blind plugin shows how people with various vision impairments will see this component. Achromatopsia vision is found in 1/30K people worldwide, but should any of them visit Lunchclub, what would their experience be like?

As we begin playing with the components, things only get worse. For instance, try guessing which day of the week is currently selected:

All in all, the number of issues with this component alone is quite astonishing. As an American company, Lunchclub may wish to consider ADA (Americans with Disabilities Act) when working on their product.

Even the primary brand colour is not AAA-compliant: not great, not terrible.

In the meantime, let’s see what we can do about improving this component.

Improving the component.

Step 1. Update the header.

Let’s begin from the top and have a look at the header: currently, the “Back” button is as small as 12x20px, which is rather far from the recommended 48x48px. We can enlarge the icon and add a bit of contrast to it, and in the meantime, move the month to the top and add some space around it.

Now, you don’t have to be the best shooter in the whole Wild West to click the link.

Step 1. Fix the labels.

Next up, let’s handle days of the week. At the very least, we will need to increase the colour contrast: it’s a minor change, many won’t even notice the difference, but the impact is tremendous.

Let’s not forget to give them all clear descriptive labels: currently, the button only says “4” and doesn’t feature an aria-label that could have provided some context.

Step 2. Update the layout.

Next, let’s make the layout slightly friendlier and clearer. One way of doing so is turning the date buttons into accessible tabs. This will surely communicate which date is selected, but the tabs do not really convey the flow of time, do they?

Let’s keep the calendar intact and add a couple of details: move the dates just a tiny bit closer together and add an indicator of the currently selected date above.

Step 3. Add focus states.

Let’s not forget about focus states as well. Every interactive element should be focusable.

There are many good guides on building accessible focus states, but my favourite one is written by Sarah Soueidan. Let’s follow it and design good, distinguishable focus states for every element of the form.

Step 4. Adding labels.

Screen readers should return a meaningful message when the element is in focus. Let’s add them to our active and non-active buttons.

Step 5. Stress-test the design.

Finally, we need to let the user know that they have chosen some time slots. One way to do so would be to add the dots to indicate slots selected for each day of the week.

Let’s stress-test our redesign and see what it looks like when the user selects every possible slot (4) for every day of the week (7).

Conclusion.

In about an hour or so, we’ve managed to identify some key issues and build a more accessible component without breaking the core UI or changing anything fundamentally.

Still, we have barely scratched the surface. Accessibility should be embedded in the product’s DNA, not come as an afterthought, but it doesn’t mean making existing experiences accessible is not possible.

Stay tuned for more accessibility tips and detailed teardowns!