Accessible Cart Drawers: Focus Traps, Announcements, and Escape Routes
2026-10-22
Slide-out carts are everywhere on Shopify, and most of them trap keyboard users or say nothing to screen readers. The fixes are specific: move focus on open, announce changes, and always leave a way out.
The drawer cart is a modal in everything but name. It covers the page, demands interaction, and offers the checkout button. Modal rules apply: focus management, announcements, and an exit that always works. Tested against those rules, the average drawer fails quietly and completely.
Focus on open and close
When the drawer opens, focus should land inside it, ideally on the drawer's heading or its close button. When it closes, focus should return to the exact control that opened it, usually the cart icon. Without the return trip, a keyboard user is deposited at the top of the page and must tab through the entire header to resume shopping.
While the drawer is open, Tab should cycle within it. A drawer that lets focus escape into the page behind creates the worst state in accessible commerce: an invisible focus indicator moving through content the user cannot see, activating links they never intended.
Announcements that carry the transaction
Adding an item, changing a quantity, and removing an item all change the cart's total. Screen reader users need those changes announced through a polite live region: 'Quantity updated, 2. Cart total $84.' Without it, the drawer is a silent form whose results can only be discovered by re-reading the whole panel.
Removal deserves extra care. The undo pattern, announce the removal and offer undo in the same region, serves everyone, but for screen reader users it is the difference between a recoverable slip and a lost item they must find and add again from the product page.
The escape routes
Escape must close the drawer. The close button must be a real button with a real label, not a times character in a div. And the overlay click that closes for mouse users needs a keyboard equivalent, which Escape already provides if it is wired.
Test the drawer the way it is actually used: add from a product page with the keyboard only, change a quantity, remove something, close, and continue shopping. Every step that requires a mouse is a step a share of your customers cannot take, and cart abandonment data will never tell you why.
What to check in your theme today
Open your store, add to cart using only Tab and Enter, and watch where focus goes. Note whether the total change is announced if you run a screen reader, or inspect for an aria-live region in the drawer markup if you do not. Check that the item count in the header updates accessibly, since the badge is how returning users confirm the add worked.
Most modern themes handle the basics; most customized drawers do not, because the customization rewired the markup. If your drawer was rebuilt for a free-shipping bar or upsell block, retest it as if it were new. It is.
Related reading
These earlier guides go deeper on connected questions: Accessible Quantity Controls in the Cart: Steppers, Inputs, and Focus, Accessible Gift Card Flows in the Cart: Codes, Balances, and Error Messages, and Accessible Subscription Controls in the Cart: Pause, Skip, and Cancel Without Traps.
Frequently asked questions
Is a cart drawer legally required to trap focus?
Accessibility standards require that keyboard focus stay usable and visible within modal-like interfaces. A drawer that covers the page and takes interaction is treated as a modal in practice, so focus containment and an Escape exit are the expected behavior.
What should a screen reader announce when quantity changes?
The new quantity, the item it applies to, and the updated cart total, through an aria-live polite region. Announcing only the total leaves the user unsure which line changed.
How do I test my cart drawer without a screen reader?
Use only the keyboard: Tab to add to cart, and confirm focus visibly enters the drawer, cycles inside, closes on Escape, and returns to the cart button. Then inspect the drawer markup for an aria-live region to confirm announcements exist.
Does the free-shipping progress bar affect accessibility?
It can. If the bar's message is visual only, screen reader users miss the threshold information. Put the remaining amount in the same live region as other cart updates so it is announced as quantities change.