A Guide to Web Accessibility for Shopify Stores

Ecommerce stores have historically had an accessibility problem - one that can be costly for your business if you turn a blind eye.

Even if you think your site is accessible already, you could still be at risk of a costly lawsuit if it's not built to the correct standards. If your ecommerce site is built on Shopify, you could especially be at risk.

Ecommerce sites account for somewhere between 69% and 77% of all ADA digital accessibility lawsuits, depending on the tracking source. Shopify powers over 4 million ecommerce stores across the globe, and that scale has made it one of the most closely watched platforms in web accessibility litigation. So, it should be no surprise that Shopify stores now account for roughly a third of all platform-specific lawsuits, second only to fully custom-coded sites.

If you run a Shopify store, accessibility isn't a nice-to-have anymore. It's a legal exposure question, a customer-experience question, and increasingly an SEO question too.

So let's dive into everything you need to know about online accessibility and how it relates to your ecommerce site.

What is Web Accessibility?

Web accessibility is a measure of how easily a website can be used by people with different devices, by people in different locations, and by people with disabilities such as visual impairments like colour blindness.

If a website is declared accessible, it means it can be used by people with a diverse range of hearing, movement, sight, and cognitive abilities - it's built for everyone. But if a website is poorly designed, it can create barriers that exclude people from using it with ease. As far as web accessibility is concerned, "using a website" means that somebody can both perceive and understand its content, and contribute to the site if such an option is offered.

So for an ecommerce website, that means a user can navigate through products and collections, purchase products, submit reviews, and more.

You may be thinking, "how do I know if my store is or isn't accessible?" Thankfully enough, there's a stack of internationally recognised standards that web builders and Shopify agencies like us — as a Shopify design agency and Shopify ecommerce agency in our own right — can use when building stores to ensure we meet the requirements.

The Web Content Accessibility Guidelines (WCAG) are internationally recognised standards developed by the World Wide Web Consortium (W3C). They explain how to make digital content accessible to people with disabilities.

To this end, the W3C also has three internationally recognised levels a site can meet to be deemed accessible:

Level A: The minimum level of accessibility. 

Level AA: The standard typically required by most legal mandates (like the ADA in the US or public sector regulations in the UK/EU). 

Level AAA: The highest and most comprehensive level of accessibility. This standard is typically reserved for government websites or public services like the NHS.

Ecommerce websites must comply with Level AA in order to avoid costly lawsuits.

Why is Web Accessibility Important to Ecommerce Stores?

Website accessibility has been getting placed under increased scrutiny in recent years, and it's causing many businesses to take a second look at their site. However, website accessibility standards have been around for years, so why are they only now becoming a talking point?

Well, in 2025, the European Union passed the European Accessibility Act, which affects all 27 member states and any business selling to customers in them (so basically everyone). It means users are given the right to take legal action against a merchant if they deem their site isn't accessible enough.

We've mentioned a few times how sites could face legal action if they don't comply with standards, but there are benefits to making your site accessible too. Namely, it improves the overall user experience and satisfaction, especially for older users. As a business looking to make sales online, ensuring as many people as possible have a path to complete their orders is crucial.

For web professionals, the most relevant part of the EAA is its alignment with the Web Content Accessibility Guidelines (WCAG) - Specifically, digital content and services must conform to WCAG 2.1 Level AA,

It applies to any business selling to EU customers regardless of where the business is based, and carries fines that can reach into the hundreds of thousands of euros depending on the country (Germany's penalties run up to €100,000; France adds separate annual penalties for missing an accessibility statement).

A proactive fix is always going to be cheaper than a reactive legal bill.

What Does Web Accessibility Look Like?

If you're a business that values your UI design and has invested lots of time into designing your site, you may be wondering what you're actually missing from a design perspective when it comes to making your website accessible.

Free yourself from the idea of web accessibility being about "web design," as web accessibility isn't concerned with how strong your CRO is, but is entirely concerned with a visually impaired user being able to use your website. So it's worth consulting an established ecommerce design agency or ecommerce development agency if you're unsure - ideally one that also operates as an ecommerce marketing agency across the wider customer journey, not just visual design.

But what if you're just starting out on Shopify? Does that mean you'll be ok?

What Web Accessibility Tools Does Shopify Provide You?

Unfortunately, simply using a recognised platform like Shopify does not guarantee compliance with Level AA web accessibility. And Shopify is actively racing to get its tech compliant.

Shopify’s Checkout in particular, has gone through a dedicated audit and remediation project targeting Level AA. That's a good foundation, and it's better than what most other platforms ship by default.

But a "good foundation" is not the same as a "compliant storefront." So here are a few realities worth knowing:

• Shopify doesn't audit apps for accessibility. Every third-party app you install injects third-party code that Shopify never vetted for keyboard traps, focus management, or screen reader compatibility.

• Premium and third-party themes vary widely. Many Theme Store options are built by designers optimising for visual polish, not HTML, and once you start customising colours, fonts, or sections through the theme editor, you can just as easily break accessibility that the base theme got right.
• Content is on you. Product photos without alt text, videos without captions, PDFs without tagged structure - none of that is Shopify's responsibility to fix. It's yours.

If you're using the Dawn theme with Shopify checkout and no third party apps - provided all of your images have alt text etc. - you'll be in decent shape. But most sites do use a custom-built theme, and that's where the risk concentrates.

Accessibility on Shopify isn't a one-time project. Themes update, apps get added, and product catalogues grow. A sustainable approach looks like:

1. Run a full audit before making major theme or app changes, not just once a year 
2. Re-check alt text and captions every time you add a product batch or video 
3. Review new apps for accessibility before installing, not after a customer complains
4. Keep your accessibility statement current with your latest audit date

Our Shopify Store Web Accessibility Checklist

Before you get into the line-by-line detail below, it helps to know that everything on this list falls into four broad buckets:

#1 - Can Everyone See it? 

This covers colour contrast, text resizing without breaking, and not relying on colour alone to convey meaning - the things that matter most for low-vision and colour-blind users.

#2 - Can People Operate it Without a Mouse?

Every button, filter, and form field needs to work with a keyboard alone, with a visible focus indicator showing where you are on the page. This is the bucket that most frequently trips up custom themes and apps.

#3 - Can Assistive Technology Understand it?

Screen readers rely on clean schema markup, proper labels, and sensible alt text to describe your store to someone who can't see it. If it's incorrect, a screen reader can't make sense of it

# 4 - Can People Recover from Mistakes?

If a user's entered something wrong, are they told why and how? Clear error messages and checkouts that don't lock people out with a CAPTCHA and no alternative.

Almost everything in the detailed checklist below is one of those four things, wearing a different hat depending on which page you're looking at. With that framing in mind, here's Cake Agency's full web accessibility breakdown, page by page.

Product Pages

• Every image has descriptive alt text describing what is displayed
• Zoom/pinch-to-zoom on product images is enabled
• Colour isn't the only way to indicate variants (e.g. a text label alongside a colour swatch)
• Price, sale badges, and stock status meet 4.5:1 text contrast
• Size/colour selectors are operable by keyboard, not just click/tap
• Promotional or sale banners use real text, not text baked into an image
• Tooltips (size guides etc.) are dismissible, hoverable, and persistent

A note on contrast: "Sufficient contrast" under WCAG AA means the difference in luminance between text (or a UI element) and its background is strong enough for people with low vision or colour blindness to read it. It's measured as a contrast ratio, from 1:1 (no contrast, e.g. white on white) to 21:1 (max contrast, e.g. black on white). Normal text needs at least 4.5:1, and large text (18pt+/24px regular, or 14pt+/18.66px bold) needs at least 3:1.

Search & Navigation

• Site can be navigated more than one way (nav menu + search + sitemap)
• Headings are used consistently and accurately describe content
• Navigation menu order and labels stay consistent across pages
• Filter/sort controls are keyboard accessible and announce state changes (e.g. "12 results")
• Icons/components with the same function are labelled the same way everywhere (e.g. cart icon always "Cart")
• Help/contact/chat links appear in a consistent location across pages
• "Read more"/"Click here" links make sense out of context or have an accessible name that does

Cart & Checkout (Highest Legal Risk Area)

Shopify's default checkout handles most of this well, but should still be spot-checked - especially where customisations or third-party apps have been added.

• Every form field has a visible, programmatically linked label (not just placeholder text)
• Input errors are clearly identified in text, not just red borders
• Error messages suggest how to fix the problem ("Enter a valid ZIP code", not just "Error")
• Before final purchase, the user can review, confirm, or correct their order
• Info already entered earlier (e.g. shipping address) isn't required again at payment
• Login/account creation doesn't rely solely on a puzzle/CAPTCHA with no alternative
• "Add to cart", "Remove", "Apply coupon" buttons meet the 24×24px minimum target size
• Drag-based interactions (quantity sliders, carousels) have a non-drag alternative
• Checkout fields use correct autocomplete attributes (name, email, address, etc.)

Focus & Keyboard

• Every interactive element is keyboard reachable and operable
• A focus indicator is visible on every focusable element, including custom buttons
• Sticky headers/footers/promo banners don't fully cover a focused element
• Modals (size guides, quick-view, cookie banners) trap focus and close via keyboard
• All modals/drawers move focus near the close button on open, with a logical tab order inside
• Sub-menus can be opened and closed following a logical tab order
• No invisible or off-screen elements occupy the tab order
• Disabled states are visually communicated and block keyboard navigation

Screen Reader Compatibility

• All critical content is available to screen readers and other assistive technology
• Purely decorative content/images are hidden from screen readers
• Focus transitions through modals and page navigation are properly communicated
• Visual icons are given accessible labels where appropriate
• Custom sliders, search, and dropdowns are tested for screen reader compatibility
• Links are distinguishable without relying on colour alone

Media & Content

• Product/demo videos have captions if they include spoken audio
• Autoplaying video/audio (hero banners) can be paused or muted
• Videos conveying important visual-only information have an audio description or text alternative
• Content in a different language (e.g. a quoted foreign-language phrase) is marked with the correct lang attribute

Technical / Markup

• No markup errors or missing labels within schema markup
• Document has a <title> element
• <html> element has a valid [lang] attribute
• Elements use only permitted ARIA attributes
• Text can be resized to 200% via browser zoom without loss of content or function
• Content doesn't break or overlap when the user overrides line height, paragraph, letter, or word spacing

Mobile-Specific

• Layout reflows properly at 400% zoom without horizontal scrolling
• Website orientation isn't locked to portrait or landscape only
• Touch target sizes are appropriate
• Mobile navigation is visible to screen readers
• Contrast and font sizing remain appropriate on smaller screens

Ongoing / Automated Testing

• Status messages (item added to cart, form submitted) are announced without moving keyboard focus
• Automated scan (axe, WAVE, or Lighthouse) run on key templates: home, category, product, cart, checkout
• Manual keyboard-only pass completed on home, product, collection, cart, and checkout pages
• Manual screen reader pass completed on the same critical pages

Web Accessibility for Shopify Stores

That's a long list,

If you've read this the whole way through and started mentally ticking off which boxes your store definitely fails, you're not alone. Most Shopify stores fall down somewhere, simply because these aren't where most merchants focus.

The good news is that none of this requires a full rebuild. Most stores can get from "at risk" to "AA conformant" through a targeted audit followed by fixes to the highest-risk areas first - checkout, forms, and keyboard navigation - before moving on to the more cosmetic items further down the list.

Treat it the same way you'd treat site speed or SEO: something you re-check every time you add a theme, an app, or a batch of new products. Doing so won't only save you from a costly lawsuit but also improve the user experience for everyone - it's its own form of CRO in a way.

If you'd rather have someone else run the audit than work through this list page by page, that's exactly the kind of project we help Shopify merchants with. Contact our ecommerce agency team; we'd love to hear from you.

As a full-service ecommerce agency and Shopify Plus agency UK merchants trust, we work as an ecommerce partner to brands from accessibility audits through to broader ecommerce marketing solutions and ecommerce growth agency support.