wcag accessibility for ecommerce: what you need to know

why accessibility matters for ecommerce

Approximately 15% of the global population has some form of disability. Inaccessible stores exclude real buyers. In several jurisdictions (US ADA, EU EAA), accessibility is also a legal requirement for commercial websites. Shopify partners and theme developers should meet WCAG 2.1 Level AA as a baseline.

colour contrast

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Check your add-to-cart button, price display, and navigation links. Tools: WebAIM Contrast Checker, or use our contrast checker tool at /tools/contrast-checker.

keyboard navigation

<!-- All interactive elements need visible focus styles -->
<button class="atc-btn">add to cart</button>

<style>
.atc-btn:focus-visible {
  outline: 2px solid #0969da;
  outline-offset: 2px;
}
</style>

image alt text

All product images need alt text. In Shopify Liquid: alt="{{ image.alt | default: product.title }}". Decorative images (icons, dividers) should use alt="" so screen readers skip them.

form labels

Every form input needs a programmatically associated label. Don't use placeholder text as a label substitute — screen readers may not announce placeholders, and they disappear on input focus.

aria roles for dynamic content

Cart drawers, quantity updates, and stock message changes should use aria-live="polite" regions so screen reader users are notified of changes without losing focus context.