Do Shopify cart drawers trap keyboard users?

Most do. The slide-out cart drawer is one of the most common components on Shopify stores and one of the least tested for keyboard access. The typical drawer fails in four predictable ways: focus is not moved into it when it opens, focus is not trapped inside it, Escape does not close it, and the page behind it stays interactive. Each failure turns a convenience feature into a wall for keyboard and screen-reader shoppers.

Why drawers attract scrutiny

Cart drawers sit at the most litigated point of the purchase path. A plaintiff’s expert testing a store will add a product to the cart, because that is what shoppers do, and the drawer is what appears. If the drawer cannot be operated by keyboard, the expert has just documented a barrier at the exact moment of purchase, which is the strongest possible evidence in a demand letter.

Drawers are also easy to demonstrate. The failure is visible in seconds: open the drawer, press Tab, watch focus disappear into the page behind it. Unlike subtle contrast ratios that require measurement, a broken drawer needs no instruments and no argument.

The four classic drawer failures

No focus management is the big one. When the drawer slides open, focus should move into it, usually to the drawer heading or the first control. Most Shopify drawers leave focus on the add-to-cart button behind the overlay, so keyboard users keep tabbing through a page they can no longer see while the drawer sits open and unacknowledged.

No focus trap is the second. Once focus is inside the drawer, Tab should cycle through the drawer’s controls until it closes. Without a trap, tabbing walks out of the drawer into the dimmed page behind it. Sighted keyboard users lose track of where they are; screen-reader users end up interacting with content they cannot see.

No keyboard dismiss is the third. The close X is often a styled element with no button semantics, unreachable by keyboard, and Escape-to-close is missing. The drawer becomes a panel the keyboard user cannot exit except by refreshing, which usually empties or confuses the cart state.

Background not inert is the fourth. While the drawer is open, the page behind it should be hidden from assistive technology and removed from the tab order. Most implementations skip this, so screen readers announce background content through the drawer and the tab order includes dozens of unreachable controls.

The five-minute drawer audit

Add a product to the cart and watch what happens to focus. Does it move into the drawer on its own? Tab through the drawer: does focus stay inside, cycling through quantity controls, remove buttons, and checkout? Press Escape: does the drawer close? Close it and check where focus lands; it should return to the add-to-cart button or the cart icon, not the top of the page.

Repeat with a screen reader if you can. The drawer should be announced as a dialog when it opens, and the background page should go quiet while it is up. If you hear product grid content bleeding through the drawer, the background is not inert.

What a compliant drawer looks like

Use proper dialog semantics: role dialog, an accessible name from the drawer heading, focus moved in on open, trapped while open, Escape to close, and focus returned on close. Announce cart updates to screen readers with a polite live region, so adding an item confirms without yanking focus away mid-shopping.

Keep the drawer’s control set small. Every control in the drawer is a tab stop, so quantity steppers, remove buttons, discount fields, and checkout links add up fast. A drawer with fifteen tab stops is technically compliant but practically exhausting. Fewer controls, clearer order.

Theme versus app responsibility

Test the drawer your theme ships with first, because that is the one most stores use. Then test every cart-related app separately: upsell apps, free-shipping bars, and cart customization apps frequently inject their own drawer code or modify the theme’s drawer, and app updates regularly regress whatever accessibility the theme had.

When the drawer comes from an app and cannot be fixed, that is a vendor problem with a vendor solution. Document the failures, send them to the app developer, and set a deadline. If the vendor cannot ship a compliant drawer, replace the app. The cart is too close to revenue to leave broken for any user.