Hi everyone.

Today we're going to be looking at Pact Coffee to see what accessibility barriers

could quietly be stopping people from checking out.

Pact Coffee is a subscription service that delivers freshly

roasted, speciality-grade coffee beans directly to your door.

And Pact is one of those brands that's really easy to get behind.

They sell amazing coffee,

they have a strong mission, they ethically source their coffee beans,

and they're a certified B Corp, so it's clear that they care about

doing things properly. So today I wanted to walk you

through their online checkout experience,

and show you how a few small, unintentional barriers might quietly

be getting in the way of people completing their coffee subscription order,

and how I would fix that. Now when I first land on a site,

I'll try to navigate around using just a keyboard,

so no mouse. And

the first here, first issue here is that there's no visible focus state

at all. As I tab through the page,

I'm moving through the page between links and buttons,

but there's no feedback. to show where I am.

Now, it's important to say that I know Pact aren't setting out to make

their site difficult to use on purpose. These kinds of issues normally

come from fast development cycles or just not realizing exactly

how many people rely on keyboard navigation every single day.

But here's a scary fact for business.

Around 69% of users will abandon

a site when they hit an accessibility barrier.

And UK businesses alone are losing over 17 billion

pounds a year because of exactly this kind of checkout friction.

And this isn't about ticking boxes or meeting technical standards.

I know Pact want to sell great. Coffee to as many

people as possible. This is about making sure that nothing gets in the way

of that. Okay, so no focus states and I

can't really make an educated guess as to where I am on the page.

Because when we,

highlight the focus order in DevTools,

we

find a lot of off-screen elements in the tab order.

I think this section

over here is the cart that slides in after you add an

item. But until that happens,

it just adds some confusion. So what would I change?

First, add visible focus styles.

You can design them to be fully on-brand, so there's no reason to take

them out entirely. And they make a massive difference to usability.

Step two, I would clean up the tab order. If something's not part of

the current flow, like the cart before it's visible,

then take it out of the tab order. The checkout popover is a

very important part of the checkout flow,

but it's best to save it for when the user actually needs it.

So let's imagine now that we've fixed the focus states and the tab order.

Uh, I would like to choose this coffee.

And

now I'm ready to add it to my cart.

So let's turn the

dev tools focus order back on again and

see what's happening on this page.

Now, if someone is using a screen reader,

then that screen reader might announce what's being focused.

Even if you don't have a visible focus state,

what a screen reader can't do is make non focusable elements

focusable. And that's what we're looking at here.

This design is really nice. Um,

but these components over here,

are, using plain non-interactive elements

with JavaScript event handlers added on.

And by default, those aren't focusable or accessible.

Now, technically you can build components this way and that's fine.

But when you do, you also have to recreate everything that the browser normally

gives you for free. Keyboard support,

screen reader compatibility, and focus handling. And in this case,

that hasn't been added in.

So why would you want to rebuild all that from scratch when native form

elements already give you keyboard support,

screen reader access, and proper semantics out of the box.

And you can still style them to look just like this.

So how would I fix this? Here,

I would use a proper button, style to look exactly the same,

which then opens up the brew method popover.

Inside this popover, you can simply use native radio buttons to

create the list. And that way it's fully keyboard accessible.

And screen readers will announce each of these options.

Really clearly, the same goes for choosing a bag size.

Standard radio buttons allow keyboard users and screen readers full

access to this area, which at the moment they don't have.

And then this quantity selector is also built with non-interactive elements,

meaning that even if I did manage to choose my coffee grind,

uh, and the bag size,

I'm still not able to update the quantity using a keyboard.

These plus and minus controls should just be native buttons

styled to look exactly the same. And the number itself should be editable as

well. So I could just type in.

The amount that I want. Now,

there are a few other things I'd look at too, but right now it's

simply not possible to complete a purchase or subscription using a keyboard

or a screen reader. So these would be the first and most important things

for Pact to fix. And for a company of Pact's size,

it's not unrealistic that this friction could currently be costing hundreds of thousands

of pounds in missed conversions. And these are customers who are actively trying to

buy. And again, none of this I know is intentional.

and none of this is a huge rebuild or design.

These are small focused changes that remove invisible conversion barriers.

Pact has got great products,

and a strong brand, and these small adjustments would

help more people enjoy it and ultimately increase conversions for

them too.