Shopify accessibility

Shopify cart accessibility: the WCAG issues that block checkout.

The cart is the last page between a visitor and a sale. It's also where accessibility issues do the most damage, because the alternative to "fix it" isn't "keep browsing" — it's "leave and buy somewhere else." Here are the issues we see most often on Shopify cart and cart-drawer templates.

Scan my store

Icon-only remove buttons with no accessible name

A trash-can icon with no text or aria-label is announced to screen readers as just "button." Shoppers using assistive tech can't tell what it does or which line item it affects.

Fix direction: add a visually-hidden label or aria-label (e.g. "Remove [product name] from cart") to the remove-item button, usually in cart-drawer.liquid or cart-item.liquid.

Quantity inputs without a programmatic label

Number inputs that rely on placeholder text or an icon instead of a real <label> leave screen-reader users guessing what the field controls.

Fix direction: associate a visible or visually-hidden <label> with the quantity input using matching for and id attributes.

Focus lost after updating the cart

When a quantity change or item removal re-renders the cart drawer via JavaScript, keyboard focus is often silently dropped back to the top of the page, forcing users to tab through the whole page again to continue.

Fix direction: after a cart update, move focus to the updated region or an appropriate live-region announcement instead of letting it default to the document body.

Low-contrast discount and error messages

Discount-code errors and stock warnings styled in light gray or pale red often fail WCAG's 4.5:1 contrast ratio for normal text, making them hard to read for many low-vision users.

Fix direction: check foreground/background combinations for cart messaging against the theme's CSS in every state — success, error, and disabled.

Keyboard traps in the cart drawer

A slide-out cart drawer that doesn't manage focus can trap keyboard users inside it, or let focus escape to hidden page content behind an open drawer.

Fix direction: ensure the drawer traps focus while open, returns focus to the trigger element on close, and is dismissible with the Escape key.

Related guides

Shopify WCAG audit — what an audit actually checks. Shopify ADA compliance checker — the US legal context.