Shopify Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance for Online Stores
Last updated: 2026-03-22
Shopify is one of the world's leading e-commerce platforms, powering millions of online stores across every industry and market. However, e-commerce presents unique accessibility challenges that go beyond typical website compliance. Product browsing, filtering, cart management, and the checkout flow all involve complex interactive patterns that must work seamlessly for users relying on assistive technologies. With the European Accessibility Act now enforceable, any Shopify store selling to EU customers must meet accessibility standards or face potential legal action and fines. The financial impact of ignoring accessibility is also significant: studies consistently show that accessible e-commerce sites see higher conversion rates, lower cart abandonment, and broader customer reach. Approximately 15% of the global population lives with some form of disability, representing over one billion potential customers who may be unable to complete purchases on inaccessible stores. This checklist focuses on the most impactful accessibility barriers found in Shopify stores, from theme-level structural issues to product page content problems. Each item is mapped to a specific WCAG 2.1 success criterion and includes Shopify-specific remediation steps. Many fixes can be implemented through theme settings or the Shopify admin panel, while others may require editing your theme's Liquid templates. We recommend addressing critical and serious issues first, then systematically working through moderate and minor items to achieve comprehensive compliance.
Common Accessibility Issues
Shopify stores often have hundreds or thousands of product images with no alt text, auto-generated alt text that just repeats the product title, or alt text that fails to describe the specific variant shown (e.g., color, angle, styling). Screen reader users cannot distinguish between product images, understand what the product looks like, or make informed purchasing decisions.
In the Shopify admin, go to Products and edit each product's images by clicking on them and filling in the Alt Text field. Describe what the image shows specifically: the product, its color, the angle, and any important visual details. For variant images, include the variant name. For lifestyle images, describe the context. Use the Shopify bulk editor or CSV import to update alt text at scale. In your Liquid templates, ensure the image tag uses the image alt property: {{ image.alt | escape }}.
<!-- Liquid template with missing alt -->
<img src="{{ image | image_url: width: 600 }}" alt="{{ product.title }}">
<!-- Results in repetitive alt text like: -->
<img src="classic-tee-blue.jpg" alt="Classic Cotton T-Shirt">
<img src="classic-tee-red.jpg" alt="Classic Cotton T-Shirt">
<img src="classic-tee-detail.jpg" alt="Classic Cotton T-Shirt"><!-- Liquid template using image-specific alt -->
<img src="{{ image | image_url: width: 600 }}" alt="{{ image.alt | escape }}">
<!-- With properly set alt text per image: -->
<img src="classic-tee-blue.jpg" alt="Classic Cotton T-Shirt in navy blue, front view">
<img src="classic-tee-red.jpg" alt="Classic Cotton T-Shirt in red, front view">
<img src="classic-tee-detail.jpg" alt="Close-up of stitching detail on Classic Cotton T-Shirt collar">Many Shopify themes implement product variant selectors (size, color, material) as custom-styled div elements or image swatches that lack proper ARIA roles, labels, and keyboard interaction patterns. Screen reader users cannot identify what type of selector they are interacting with, which option is currently selected, or navigate between options using expected keyboard patterns.
Ensure variant selectors use native HTML form elements (radio buttons or select elements) as their base, even if visually styled differently. Color swatches should use radio inputs with visible labels that include the color name. Add aria-label or associated label elements that describe the selector group (e.g., 'Select size'). Use aria-checked for toggle-style selectors and ensure the selected state is communicated both visually and programmatically.
When users submit the checkout form with errors (missing required fields, invalid email format, expired credit card), Shopify's default error handling often displays error messages visually at the top of the form or inline near the field, but these messages are not announced to screen reader users. The user may not realize their submission failed or know which fields need correction.
Add role="alert" or aria-live="assertive" to error message containers so they are announced by screen readers when they appear. Each error message should also be programmatically associated with its field using aria-describedby. Ensure the focus moves to the first error field or to the error summary after form submission fails. In Shopify's Liquid checkout templates (for Shopify Plus) or theme templates, add these ARIA attributes to form error elements.
Collection pages with product filters (price range sliders, category checkboxes, color filters) and sorting controls are frequently implemented with JavaScript that only responds to mouse interactions. Range sliders are not operable with arrow keys, custom dropdown menus cannot be opened with Enter or Space, and filter panels that slide in from the side trap focus or cannot be dismissed with Escape.
Replace custom range sliders with native HTML range inputs styled with CSS, or ensure custom sliders support arrow key navigation and announce their current value. Use native checkbox and radio inputs for filter options. Ensure dropdown menus follow the ARIA menu pattern with proper keyboard support (Enter to open, arrow keys to navigate, Escape to close). For slide-in filter panels, implement focus trapping within the panel and allow Escape to close it.
Shopify themes commonly display sale prices, discount badges ('20% OFF'), and stock status indicators ('Only 3 left!') in colors that fail the WCAG minimum contrast ratio. Red sale prices on white backgrounds, white text on bright colored badges, and light green 'In Stock' text are frequent offenders. This critical purchasing information is invisible to users with low vision or color blindness.
Check all price displays, badges, and status indicators with a contrast checker tool. Ensure regular-sized text meets 4.5:1 and large text meets 3:1 contrast ratio against its background. Edit your theme's CSS to adjust these colors. In your Shopify theme editor, go to the theme settings for colors and update sale price colors, badge colors, and status text colors. Do not rely solely on color to convey information — add text labels alongside color indicators.
Many Shopify themes include Quick View functionality that opens a modal overlay when clicking on a product card. These modals frequently fail to move focus into the modal when opened, do not trap focus within the modal, cannot be closed with the Escape key, and do not return focus to the triggering element when closed. Screen reader users may not even realize a modal has opened.
Implement proper modal dialog behavior: add role="dialog" and aria-modal="true" to the modal container, include an aria-label or aria-labelledby referencing the modal title, move focus to the first focusable element when the modal opens, trap tab focus within the modal, close the modal on Escape key press, and return focus to the trigger button on close. Consider whether Quick View is even necessary — it adds complexity and many users prefer navigating to the full product page.
<div class="quick-view" style="display:block">
<div class="quick-view-content">
<span class="close" onclick="closeModal()">X</span>
<h2>Product Name</h2>
<!-- product details -->
</div>
</div><div class="quick-view" role="dialog" aria-modal="true" aria-labelledby="qv-title">
<div class="quick-view-content">
<button class="close" aria-label="Close quick view" onclick="closeModal()">X</button>
<h2 id="qv-title">Product Name</h2>
<!-- product details -->
</div>
</div>
<script>
// On open: focus first element, trap focus, listen for Escape
// On close: return focus to the product card that triggered the modal
</script>When a user clicks 'Add to Cart', many Shopify themes change the button text to 'Added!' or show an animation, update the cart count in the header, and possibly open a cart drawer — all without informing screen reader users of these state changes. The user has no confirmation that their action was successful.
After the item is added to the cart, use an aria-live region to announce the success message (e.g., 'Product Name added to cart. Cart now contains 3 items.'). If a cart drawer opens, manage focus as you would a modal dialog. Update the cart icon's accessible label to reflect the new count. Ensure the 'Add to Cart' button shows loading and success states with appropriate aria-busy and status announcements.
Shopify-Specific Tips
- Use Shopify's Dawn theme or another Online Store 2.0 theme as your starting point. Dawn was built with accessibility in mind and includes proper semantic HTML, ARIA landmarks, focus management, and keyboard navigation patterns out of the box.
- When editing Liquid templates, always use Shopify's built-in accessibility filters and objects. Use {{ image.alt | escape }} for image alt text, ensure all form elements use the proper Liquid form tags that generate accessible markup, and leverage section schema settings to allow merchants to add alt text and ARIA labels through the theme editor.
- Test your entire checkout flow with keyboard-only navigation. Shopify controls the checkout for non-Plus stores, but you can customize the cart page and cart drawer in your theme. For Shopify Plus stores, audit the checkout.liquid template carefully as customizations often introduce accessibility regressions.
- Be cautious with third-party Shopify apps that inject content into your storefront (review widgets, upsell pop-ups, chat widgets, cookie banners). Each app adds its own HTML and JavaScript that may not be accessible. Test each app with a screen reader and keyboard before deploying, and remove or replace apps that create barriers.
- Use Shopify's built-in metafields to store and display structured accessibility information for products, such as detailed text descriptions of visual product features, size charts in accessible table format, and material safety information that might otherwise be conveyed only through images.
Recommended Tools
Accessibly
A Shopify app that scans your store for WCAG accessibility issues, provides an accessibility statement generator, and offers an accessibility widget that lets visitors adjust contrast, font size, and spacing.
axe DevTools
A browser extension by Deque Systems that performs automated accessibility testing on any web page, including Shopify storefronts. Identifies WCAG violations with detailed remediation guidance and integrates with development workflows.
Shopify Theme Inspector for Chrome
While primarily a performance tool, the Theme Inspector helps identify which Liquid template files generate specific page elements, making it easier to locate and fix accessibility issues in your theme code.
Further Reading
Other CMS Checklists
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.