Is your Shopify cart drawer accessible?
An accessible cart drawer moves focus into the drawer when it opens and back to the trigger when it closes, announces quantity and total changes to assistive technology, gives every remove button a real accessible name, and can be fully operated by keyboard including Escape to close.
The drawer that opens and strands you
The most common cart drawer failure is focus management. The drawer slides in, but keyboard focus stays behind on the page. A sighted mouse user sees the drawer and clicks around. A keyboard user tabs through content they cannot see while the visible drawer waits. A screen reader user may not know the drawer opened at all, because nothing was announced and focus never moved.
The fix is a short contract: when the drawer opens, move focus to the first focusable element inside it, usually the drawer heading or the close button. When it closes, return focus to the element that opened it. Trap focus inside the drawer while it is open so tabbing does not leak back to the page behind it. This is standard dialog behavior, and cart drawers that skip it fail the most basic keyboard test.
Quantity controls that lie by omission
Cart drawers love compact quantity steppers: a minus button, a number, a plus button. For screen reader users these are often three mysteries. The minus and plus buttons may be icon-only with no accessible name, so they announce as "button" with no purpose. The number may be plain text with no programmatic connection to the buttons, so changing it announces nothing and the user has no idea the quantity or the total moved.
Each stepper needs a real label, like "Decrease quantity of Blue Oxford Shirt," and the quantity value needs to be announced when it changes, ideally through a live region or by associating the output with the controls. The line total and cart total should also announce their updates, because a shopper who cannot see the drawer is otherwise editing blind.
Remove buttons with no name
Remove buttons are frequently an X icon with no accessible name, announced as "button" or as the letter X. In a drawer with four line items, that is four identical mystery buttons. The accessible name should include the product: "Remove Blue Oxford Shirt from cart." It costs nothing to implement and it is one of the most common specific failures we flag on Shopify storefronts.
After removal, focus needs somewhere to go. If the removed item was the last thing in the drawer, or if focus was on the remove button itself, dropping focus back to the body leaves keyboard users stranded. Move it to a sensible place: the next line item's controls, or the drawer heading if the cart is now empty.
The empty cart and the free shipping bar
Two smaller failures show up constantly. First, the empty-cart state: many drawers show an empty message with no heading structure and no action, leaving screen reader users at a dead end. Give the empty state a heading and a link back to shopping.
Second, the free-shipping progress bar. "You are $12 away from free shipping" is often a visual bar with text that updates silently. Screen reader users get nothing. The text equivalent should be in the accessibility tree and should update when the total changes, because for many shoppers that progress message is what decides whether they add one more item.
How to test it in ten minutes
Open the drawer with the keyboard and confirm focus moves inside. Tab through every control and confirm each one announces a useful name. Change a quantity and confirm the change is announced. Remove an item and confirm focus lands somewhere sensible. Close with Escape and confirm focus returns to the cart trigger. If all five pass, your drawer is ahead of most Shopify stores we scan. If any fail, each fix is small, and each one protects a shopper who was ready to buy.
Cart drawers get tested by every buyer and by almost no one on the accessibility side. That combination is exactly why they show up in demand letters: a money page, used constantly, failing basic checks. Auditing the drawer is cheap. Defending a demand letter about it is not.