Guides Shopify

Shopify Accessibility: Liquid Themes, Checkout, and RGAA Compliance for E-commerce

Shopify and Accessibility: Accessible E-commerce Is a Competitive Advantage

With the European Accessibility Act enforcement, e-commerce sites must be accessible. An accessible site reaches a wider audience and improves the experience for everyone.

Dawn Theme and Accessibility

Shopify's default Dawn theme was designed with accessibility: semantic HTML, keyboard navigation, WCAG AA contrast ratios, skip links, and labeled forms. However, customizations via the theme editor or Liquid code can introduce regressions.

Accessible Product Pages

Product images need descriptive alt text, keyboard-navigable galleries, and accessible zoom. Variant selectors must use labeled inputs, color swatches need associated text, and variant changes must announce new prices via aria-live. The add-to-cart button must be descriptive and announce confirmations.

Cart and Checkout

Cart tables need proper headers, quantity fields need labels, and product removal must be confirmed. Shopify's checkout has improved accessibility but some elements remain problematic. Checkout Extensibility allows improvements with accessible Polaris UI components.

Search and Filters

Search fields need labels and submit buttons, predictive results must follow ARIA combobox patterns, collection filters must be keyboard-accessible, and filter application must announce updated result counts.

Accessible e-commerce is not a constraint — it is an investment. Accessible stores convert better because the experience is improved for ALL users, not just people with disabilities.
The Dawn theme offers a good accessibility foundation (semantic HTML, keyboard navigation, contrast). But customizations (custom sections, third-party apps, Liquid modifications) can degrade accessibility. An audit remains necessary after customization.
Shopify as a platform is not RGAA-certified. Compliance depends on the theme, customizations, and third-party apps. The Dawn theme and Polaris components (checkout) have good accessibility, but final responsibility lies with the merchant.
Color swatches must have associated visible text or via aria-label ("Navy blue"). Do not convey information by color alone. The selected swatch must be indicated by aria-checked="true" and a visual indicator other than color (border, checkmark).

Test your site's compliance

Scan your site and get a detailed report with AI recommendations.

Scan my site - €15