Where’s your focus? (does your product page break navigation?)

Accessibility review: focus management in cart drawers

Where’s your focus?

When a customer adds something to their cart, a drawer often slides in from the side (especially on Shopify stores) - showing their total, a checkout button, maybe a free-shipping message.

Visually, that’s where their attention goes.
But is their keyboard focus there too?

In almost every store I’ve reviewed this month, the answer was no.

That means the drawer might be open, but the keyboard user isn’t there.

Instead of moving through the cart, the focus stays on the product page, behind the cart - continuing through the normal tab order: size guide, FAQs, returns.

All useful information, but not where they expected to be.

They can’t reach the checkout button, can’t close the cart, and might not even realise the cart is open. It’s a small detail that can cause a big disconnect.

The screen reader keeps reading about delivery and returns while the customer thinks, “hang on, did that even work?”

What should happen instead

When the cart drawer opens, the keyboard focus should move inside - ideally to the heading or checkout button - and stay there until it’s closed.

When the user presses Escape or clicks away, focus should return neatly to the “Add to cart” button they started from.

That’s what “fixed” looks like. And it’s a simple fix, too.

A single, seamless movement that makes every customer - visual, non-visual, mouse, or keyboard - feel like the site is working with them, not against them.

👉 Try it yourself: add something to your cart using only your keyboard.
Does your focus move to the drawer - or stay behind?

Accessibility isn’t about adding features.
It’s about keeping focus - visual and otherwise - exactly where your customers are.