Making a Cart Drawer Accessible: Focus, Labels and Announcements

An accessible cart drawer moves keyboard focus into the drawer when it opens, keeps it there until the drawer closes, closes on Escape, and returns focus to where the shopper was. Every control has a name a screen reader can speak, cart changes are announced, text has enough contrast, and animation respects the shopper's motion setting. This guide applies the WCAG 2.2 level AA standard to that one component, requirement by requirement, and ends with a test you can run yourself in a few minutes. For the criteria across a whole shop, see our article on WCAG 2.2 for commerce sites.

Where should focus go when the drawer opens and closes?

Into the drawer on open, and back to the trigger on close. A drawer appears on top of another page: a sighted mouse user sees it slide in, but a keyboard user needs focus moved for them. In detail:

1. On open, move focus inside. The drawer's heading or its close button are both reasonable targets. If focus stays on the add-to-cart button behind the drawer, a keyboard user is tabbing through a page they can no longer see properly.
2. Mark it as a dialog. The drawer should be exposed to assistive technology as a modal dialog with a name, such as 'Your cart', so a screen reader announces what has appeared.
3. Keep focus in. Tab from the last control should go to the first control in the drawer, and Shift+Tab the reverse. The page behind should be unreachable by keyboard and hidden from screen readers while the drawer is open.
4. Escape closes it. So does the close button, and usually a click on the dimmed background.
5. On close, return focus. Send it to the control that opened the drawer: the add-to-cart button or the cart icon. Dropping focus at the top of the page makes the shopper find their place again.

One more case: when the shopper removes the item whose button had focus, focus must land somewhere sensible, such as the next item or the empty-cart message.

Are the buttons and quantity controls labelled?

Every control needs a text name, even if it shows only an icon. Without one, a screen reader says 'button' and nothing else.

• Close: 'Close cart'.
• Remove: 'Remove Linen Shirt, size M', not just 'Remove'. In a cart with four items, four identical 'Remove' buttons are indistinguishable.
• Quantity: 'Decrease quantity for Linen Shirt', 'Increase quantity for Linen Shirt', and a labelled number field between them.
• Add-on checkboxes: the label should include the price, so the cost is spoken with the choice.

Quantity controls deserve particular care:

• Use real button elements, not clickable shapes, so they work with Enter and Space.
• Make them large enough to tap. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, and bigger is kinder on a phone.
• Keep focus on the button after it is pressed, even if the cart redraws. A redraw that throws focus away makes it impossible to press plus three times in a row.

These overlap heavily with good small-screen design, covered in our guide to mobile cart drawer UX.

How does a screen reader user know the cart changed?

Through a live region: a part of the page that assistive technology reads aloud when its content changes, without moving focus. A cart drawer updates constantly and silently, and each update needs a spoken equivalent.

Announce these:

• An item was added, removed or its quantity changed, with the new subtotal.
• A reward was reached: 'You have unlocked free shipping.'
• A discount code was applied or rejected, and why.
• An error, such as an item that is out of stock at the requested quantity.

Keep announcements short, and do not read out the whole cart on every change.

A rewards progress bar needs a text version too. 'Spend $12 more for free shipping' as real text does the job; a coloured bar with no text conveys nothing to someone who cannot see it.

Are contrast and motion handled?

Body text needs a contrast ratio of at least 4.5 to 1 against its background, and large text, icons and the edges of controls need at least 3 to 1. Cart drawers tend to fail in the same places:

• Pale grey secondary text: variant names, 'taxes calculated at checkout', struck-through prices.
• The filled and unfilled parts of a progress bar being too close in tone.
• Focus outlines removed for looks. Every focusable control needs a visible focus indicator.

A drawer that inherits your theme's look inherits its contrast as well. Marka Cart Drawer takes its colours, fonts and button shape from your theme, so run a contrast check on the result as you would on any drawer.

For motion, respect the shopper's reduced-motion setting. Operating systems let people ask for less animation, and browsers pass that preference on to the page. When it is on, replace the slide-in with an instant appearance or a brief fade, and switch off confetti, shakes and pulsing buttons.

How do you test it yourself?

Put the mouse aside and try to buy something.

• Tab to a product's add-to-cart button and press Enter. Is focus now in the drawer?
• Tab through the whole drawer. Can you reach everything, see where you are, and never escape to the page behind?
• Change a quantity and remove an item using only the keyboard.
• Press Escape. Are you back on the button you started from?
• Turn on the screen reader built into your computer or phone and repeat. Is each control named, and is each change announced?
• Zoom the browser to 200 percent. Is the checkout button still reachable?

A short checklist

1. Focus moves into the drawer on open, stays inside, and returns to the trigger on close.
2. Escape closes the drawer.
3. Every button, including icon buttons, has a specific spoken name.
4. Quantity controls are real buttons of adequate size that keep focus when pressed.
5. Cart changes, rewards and errors are announced through a live region.
6. Text, controls and focus indicators meet contrast minimums.
7. Animation is reduced when the shopper's device asks for it.

Accessibility sits alongside the other points in our cart drawer design checklist and the broader guide to what a Shopify cart drawer should contain. Whichever drawer you use, run the keyboard test on it before trusting it; if you are evaluating Marka Cart Drawer, run it on that as well.