How do you make a Shopify cart drawer accessible?
The cart drawer is a modal, a live region, and a focus trap all at once. Get any of the three wrong and keyboard and screen reader users cannot check out.
The cart drawer is three components wearing a trench coat
A cart drawer looks simple: a panel slides in, shows the items, offers checkout. Underneath it is three accessibility problems stacked together. It is a modal dialog, so focus must move into it and stay there. It is a live region, because quantities and totals update without a page reload. And it is a focus trap with an escape hatch, because the shopper has to get back out. Themes that treat it as just a sliding panel get all three wrong in different ways.
Test with a keyboard before reading further. Open the cart drawer, tab through it, change a quantity, remove an item, close it. Note every moment focus goes somewhere surprising. That list is your fix list, and it is more reliable than any checklist.
Focus must enter, stay, and return
When the drawer opens, move focus to the drawer itself or its heading, and announce it. While the drawer is open, tabbing must cycle within the drawer: the page behind it is inert, not just visually dimmed. When the drawer closes, return focus to the control that opened it, which is usually the cart button. That return trip is the step most themes skip, and it strands keyboard users somewhere unexpected on the page.
The escape key closes the drawer, always, and a visible close button does the same. Both must be reachable by keyboard and announced to screen readers. If your drawer closes when the shopper tabs past the last element instead of trapping focus, that is a bug, not a feature.
Announce the updates or they did not happen
Changing a quantity, removing an item, or applying a discount updates the drawer without reloading the page. A sighted shopper sees the total change. A screen reader user hears nothing unless the drawer announces it. Wrap the cart summary in a live region so updates are announced politely: item removed, quantity updated to two, new total.
Polite, not assertive. The announcements should not interrupt whatever the shopper is doing. And announce the meaningful change, not the raw numbers: "Removed Blue Hoodie, 2 items remaining, total $84" beats "Cart updated." Test with an actual screen reader; simulators miss the timing problems that real announcements have.
Every control in the drawer must be a real control
Quantity steppers built from divs with click handlers, remove buttons that are actually links to nowhere, checkout buttons that only work with a mouse: the cart drawer concentrates every fake-control antipattern because it was designed visually first. Each interactive element needs to be the right semantic element, reachable by keyboard, with a visible focus indicator and an accessible name that says what it does.
Pay special attention to the quantity steppers. They need labels that identify the item: "Decrease quantity of Blue Hoodie," not just "minus." When three items each have a minus button, unlabeled steppers are indistinguishable to a screen reader user.
The empty cart and the error states
Test the drawer empty. An empty cart drawer should announce itself clearly and offer a path back to shopping, not just show a blank panel. Test the error states too: a discount code that fails, a quantity that exceeds stock. Errors must be announced, associated with the field they belong to, and phrased so the shopper knows how to fix them.
These states get skipped because developers test the happy path. Shoppers with disabilities hit the error states at the same rate as everyone else, and a confusing error in the cart drawer is a lost sale with a clear cause.
Verify with the drawer in all its moods
Run the full keyboard and screen reader pass on the drawer with one item, with many items, empty, with a discount applied, and with an error showing. Then run it on mobile, where the drawer is often full-screen and the focus behavior differs. Then add an item from a product page, from a quick-add button, and from the cart page itself, because each entry point can trigger different focus behavior.
Add the cart drawer to the regression list for every theme update. It is one of the most customized components on a Shopify store and one of the first to break. A drawer that passed in September can fail in October because of an app update nobody connected to it.