Why Pact Coffee’s checkout is losing customers — and how to fix it

What can Pact Coffee do to remove accessibility barriers and increase their sales? Let’s take a look at how I’d improve their online checkout flow.

Accessibility Review: Pact Coffee Checkout (Video)

Watch Why Pact Coffee’s checkout is losing customers — and how to fix itDownload the transcript

How I’d improve Pact Coffee’s checkout accessibility (and why it matters for conversions)

Pact Coffee is one of those rare brands that’s genuinely easy to get behind. They roast exceptional speciality-grade beans, delivered straight to your door, and back it all up with a strong ethical mission. They’re a certified B Corp, too - so it’s clear they care about doing things properly.

But even great brands can unintentionally lose customers through small accessibility barriers - especially during the most critical part of the journey: the checkout.

In this short review video, I walked through Pact’s online checkout experience, to see how well it holds up for users with different access needs - and I found some quick wins here that could significantly boost conversions and customer satisfaction.

Barrier #1: No visible keyboard focus styles

When navigating Pact’s site with the keyboard, there’s no visible indication of where I am on the page. I can tab through links and buttons, but there’s no visual feedback. Without a visible focus state, keyboard users can easily get lost.

This kind of issue is surprisingly common — fast development cycles often push accessibility down the priority list, and with 94.8% of the top one million websites showing barriers like this, it’s easy to see how it slips through.

But it matters more than most people realise: 69% of users who encounter an accessibility barrier will abandon the website entirely. And in the UK alone, businesses lose an estimated £17.1 billion a year due to preventable digital accessibility issues.

So what would I change?

  • Add visible focus styles. These can be fully on-brand, and make a huge difference to usability.
  • Clean up the tab order. Right now, elements that aren’t visible (like the cart popover) are still in the tab order, adding confusion.

Barrier #2: Custom components without native support

Let’s pretend for a minute that we’re on the Pact coffee dev team, and we’ve now fixed focus and tab order. Next I want to choose a coffee to start my subscription.

The UI for selecting brew method, grind type, and quantity looks great - but under the hood, it’s using non-interactive HTML elements with JavaScript event handlers. These don’t receive keyboard focus or screen reader support unless you manually rebuild everything the browser normally provides for free.

And in this case, that hasn’t been done.

The result is that you can’t complete a subscription using just a keyboard or screen reader. That means a paying customer, ready to buy, hits a wall they can’t get past.

Here’s what I’d recommend:

  • Replace decorative divs with native HTML elements like <button> and <input type="radio">.
  • Use real radio buttons for brew methods and bag sizes, and native buttons for plus/minus quantity controls.
  • Make the quantity editable with a keyboard - not just clickable.

All of this keeps the custom UI intact visually, but ensures that every user can interact with it - not just those using a mouse.

Why this matters for businesses

This isn’t about ticking technical or compliance boxes. It’s about removing invisible friction that quietly loses customers and costs revenue.

If someone wants to buy from you but can’t - not because of price or product, but because of a hidden UI limitation - that’s not just bad UX. That’s a missed sale.

And there’s a broader pattern here: research shows that 83% of users with access needs will limit their shopping to websites they know are accessible. Meanwhile, only 8% of disabled users will reach out to report an issue - the rest just quietly leave and don’t come back.

If your site is even slightly easier to use than the competition’s, you’re not just helping customers - you’re earning trust, loyalty, and revenue.

A competitive advantage in plain sight

Pact already has a brilliant product and a strong mission. A few thoughtful tweaks would make their checkout experience every bit as good as the coffee they sell.

The best part is these fixes aren’t expensive. They don’t require a redesign. They’re focused, high-impact improvements that make the buying process smoother for everyone.

And if you’re thinking long-term: digital accessibility isn’t just the ethical choice - it’s a real competitive edge in a world where 96% of websites still have detectable accessibility issues.

So here’s the opportunity: remove invisible barriers, grow your customer base, and make the checkout experience as inclusive as the brand itself.