# Focus Order in the Cart Drawer: A Practical Check for Keyboard Shoppers

Source: https://cartcomply.com/blog/2026-10-13-cart-drawer-focus-order.html

2026-10-13

The slide-out cart drawer is the default cart experience on modern Shopify themes, and it is an accessibility obstacle course. It animates in from the side, it contains quantity controls, remove buttons, upsells, and a checkout button, and for a keyboard shopper it raises an immediate question the theme rarely answers: where did my focus just go?

Focus order inside drawers fails in predictable ways, which is good news. Predictable failures have predictable checks. You can audit your own cart drawer in five minutes with nothing but a keyboard, and the fixes are small once you know which of the three classic failures you have.

## Failure one: focus never enters the drawer

The shopper tabs to the add-to-cart button, presses enter, and the drawer slides open on screen. Visually, everything changed. In focus terms, nothing did. The next tab press moves to whatever followed the button in the page behind the drawer, and the shopper is now tabbing through a page they cannot see while a drawer they cannot reach sits open.

The correct behavior is simple: when the drawer opens, focus moves into it, usually to the drawer heading or its close button. The shopper's place in the page is deliberately handed over to the drawer, and the screen reader announces the change. Any drawer that opens without moving focus fails the most basic test.

## Failure two: focus escapes out the back

A drawer that accepts focus but does not trap it creates the strangest experience of the three. The shopper tabs through the quantity controls and the checkout button, keeps tabbing, and falls out the bottom of the drawer into the page behind it: the footer, the header, the product grid, all while the drawer still covers the screen.

Focus trapping means tab cycles inside the open drawer and shift-tab cycles backward, until the shopper closes it. It feels invisible when it works, which is the point. Test it by opening the drawer and tabbing twenty times. If your focus indicator ever lands on something the drawer covers, there is no trap.

## Failure three: focus dies on close

Close the drawer with the escape key or the close button and watch where focus goes. In broken themes it goes nowhere: focus resets to the top of the document, and the shopper's next tab press starts from the very first link on the page. On a long category page, that strands them far from the product they just added.

Focus should return to the element that opened the drawer, the add-to-cart or cart button, so the shopper resumes exactly where they left off. This is a few lines of code: store the trigger element on open, restore focus to it on close. It is also the failure merchants fix last, because sighted mouse users never notice it exists.

## The five-minute check

Unplug the mouse, or just promise not to touch it. From your homepage, tab to a product, add it to the cart using only the keyboard, and note where focus lands when the drawer opens. Tab through the whole drawer twice. Change a quantity. Close the drawer with escape and tab once more to see where you resume.

Write down which of the three failures you found and hand that list to your theme developer. Each has a standard fix, and a developer told the drawer does not trap focus will fix it in a fraction of the time of one told the cart is not accessible. Specific findings get fixed. Vibes get deferred.

## Frequently asked questions

### What is focus order in a cart drawer?

It is the sequence keyboard focus follows when a shopper tabs through the cart drawer: whether focus enters the drawer when it opens, stays trapped inside while it is open, and returns to the cart button when it closes. All three stages need deliberate handling.

### How do you test a cart drawer with only a keyboard?

Add a product using only the keyboard and watch where focus lands as the drawer opens. Tab twenty times to check focus stays inside the drawer. Change a quantity, then close with escape and confirm focus returns to the button that opened the drawer. Five minutes covers it.

### What is focus trapping and why does it matter?

Focus trapping keeps tab cycling inside an open drawer instead of leaking into the page behind it. Without a trap, keyboard shoppers tab into content the drawer covers and lose their place entirely. It is a WCAG expectation for modal-style interfaces.

### Who fixes cart drawer focus problems?

Your theme developer, and the fix is usually small: move focus on open, trap it while open, restore it on close. Give them the specific failure you found in your keyboard check rather than a general accessibility complaint, and it gets fixed faster.

## Get a free accessibility audit of your website

[Free accessibility audit](mailto:hello@cartcomply.com?subject=Free%20accessibility%20audit%20-%20cartcomply.com)