How to make a Shopify cart drawer accessible

A slide-out cart drawer is a modal dialog, and it needs to behave like one. That means a dialog role with aria-modal="true" and a name, focus that moves into the drawer when it opens and stays there while it is open, Escape to close it, and focus returned to the button that opened it. Inside, every quantity and remove control needs a name that includes the product, and changes to the cart need to be announced. Shopify's free Dawn theme does all of this, so you can compare your theme with it.²³

Why cart drawers cause problems

Drawers replaced the separate cart page on many Shopify themes because they keep shoppers on the product. For a mouse user that is smooth. For a keyboard or screen reader user, a badly built drawer can mean:

• the drawer opens, but focus stays on the page behind it, so the next Tab press moves through hidden product links;
• focus escapes from the drawer to the page underneath while it is still covering it;
• there is no way to close it without a mouse;
• when it closes, focus is lost and the user is thrown back to the top of the page;
• the plus, minus and bin buttons are announced as "button" with no name;
• adding an item or changing a quantity updates the subtotal silently.

At checkout time, any one of these can stop a sale.

What Shopify asks of drawers and modals

Shopify's accessibility guidance for themes sets out four rules for drawers and modals:¹

1. when a drawer or modal opens, focus moves to the element that labels it;
2. keyboard navigation stays within the open drawer or modal;
3. the Escape key closes it and returns keyboard focus to the element that launched it;
4. the role used to identify modals is dialog.

These match the WAI-ARIA Authoring Practices dialog pattern, which also describes Tab and Shift+Tab wrapping within the dialog and Escape closing it.⁴ They also satisfy two WCAG requirements: focus must move in an order that preserves meaning,⁵ and keyboard users must be able to leave any component they can enter.⁶ Trapping focus inside an open modal is allowed, because Escape and the close button let the user leave.

How Dawn builds its cart drawer

Dawn's drawer is a useful reference because it is Shopify's own theme. Its markup gives the drawer role="dialog", aria-modal="true" and an aria-label with the cart title, and its close buttons have an accessible label.² Its script closes the drawer on Escape, traps focus inside the drawer when it opens (inside the empty-cart message when the cart is empty), remembers the element that opened it, and returns focus there when it closes.³

<div id="CartDrawer" role="dialog" aria-modal="true" aria-label="Your cart">
  <button type="button" aria-label="Close">…</button>
  …
</div>

If your theme's drawer comes from an app or a page builder, check its markup for the same three attributes, then test the behaviour, which matters more than the markup.

Label every control with the product

A cart line usually has a quantity field, plus and minus buttons and a remove button. With three products in the cart, a screen reader user who hears "minus, button" three times cannot tell which line is which. WCAG 4.1.2 asks that every control has a name that assistive technology can read,⁸ and 3.3.2 asks for labels when content needs user input.⁹

• Name the quantity field with the product, for example "Quantity for Linen Shirt". Dawn's quantity inputs use an aria-label built from a translated "quantity for" string and the product title.²
• Name the plus and minus buttons with the action and product: "Increase quantity for Linen Shirt".
• Name the remove button the same way: "Remove Linen Shirt".
• If the product image is a link, its alt text or link name should be the product title, not "image".

Announce what changed

When a shopper adds an item from a product page, the drawer may slide open, or a small "Added to cart" notice may appear. When they change a quantity inside the drawer, the line total and subtotal update. WCAG 4.1.3 asks that status messages like these can be presented to assistive technology without receiving focus, which normally means an aria-live region or a role="status" element.⁷ Shopify's theme guidance says the same for notifications and messages, using aria-live.¹ Dawn's cart script updates a cart live region after a change.¹³

• After a quantity change, announce the new subtotal or a short message such as "Cart updated".
• If a change fails, for example because stock ran out, announce the error and leave focus on the control.
• If adding to cart opens the drawer, moving focus into the drawer is enough on its own; do not also announce the whole drawer.

Focus you can see, and that is not hidden

WCAG 2.4.7 asks for a visible keyboard focus indicator.¹⁰ Drawers often sit on top of a dark overlay and use their own colours, so check that the focus outline is visible inside the drawer as well as on the page. WCAG 2.2 also added 2.4.11, Focus Not Obscured (Minimum): when a control receives focus, it must not be entirely hidden by content the author put on top, such as a sticky checkout bar or a free-shipping banner.¹¹ Long carts that scroll under a sticky footer are a common failure.

Size matters too. WCAG 2.2's target size criterion asks for pointer targets of at least 24 by 24 CSS pixels, with some exceptions,¹² and Shopify's guidance asks themes for 44 by 44 pixels for primary touch targets, including cart menu buttons, close buttons for modals and quantity controls.¹ Tiny plus and minus buttons fail on phones.

A five-minute test

1. On a product page, use only the keyboard to add an item to the cart. Does the drawer open with focus inside it?
2. Press Tab repeatedly. Does focus stay inside the drawer and wrap back to the start?
3. Change a quantity with the keyboard. With a screen reader on, is the new total announced?
4. Tab to each button. Does each one say which product it acts on?
5. Press Escape. Does the drawer close, with focus back on the cart button you started from?
6. On a phone, try the plus, minus and remove buttons with your thumb.

For the checkout step after the drawer, see accessible forms and checkout. For a wider keyboard pass across the store, see how to test your website with only a keyboard, and for the theme as a whole, how to make a Shopify theme accessible. Product pages have their own pitfalls; accessible Shopify variant pickers and colour swatches covers the picker that comes before the cart.

Keep checking after theme and app updates

Cart drawers change often: a theme update, a new upsell app or a free-shipping bar can each break focus handling or add unlabelled buttons. Jralo for Shopify, our app, checks your homepage and up to five linked pages against the WCAG 2.2 A and AA rules that automated testing can check, and keeps a dated record of every check; daily checks are on the paid Site plan.¹⁴ Automated checks find many problems but not all, so keep the manual test above in your routine as well. You can install Jralo from the Shopify App Store; it is free to install. Disclosure: Jralo is our own product, made by Misimi Corp.