ADA Compliance for Shopify Stores: What You Need to Know

Shopify powers over four million online stores. That's a lot of product pages, checkout flows, and navigation menus. And if any of those elements aren't accessible to people with disabilities, you've got a problem. Not just a legal one (though that's real), but a business one. You're locking out customers who want to buy from you.

I've scanned hundreds of Shopify stores with our free scanner, and I see the same accessibility issues over and over. The good news: most of them are fixable. Some are easy fixes you can handle in an afternoon. Others require a bit more work, or a better theme. This guide covers all of it.

Why Shopify Store Owners Need to Care About Accessibility

There are three big reasons, and they all matter.

Your Customers

About 1 in 4 adults in the U.S. has some form of disability. That includes people who are blind or have low vision, people who are deaf or hard of hearing, people with motor impairments who can't use a mouse, and people with cognitive disabilities. These aren't edge cases. They're your customers. And if your store doesn't work with their assistive technology, they'll go somewhere else.

Think about it from a purely practical standpoint: if your front door was too narrow for wheelchairs, you'd fix it. Your website is your front door now.

Legal Risk

ADA website lawsuits have been climbing year after year. E-commerce stores are frequent targets because the connection between the website and commercial activity is obvious. Courts have consistently ruled that websites of businesses open to the public fall under ADA Title III. Being on Shopify doesn't give you a pass. The store is yours, and so is the liability.

Most of these lawsuits settle for $5,000 to $25,000 in legal fees, plus the cost of remediation. For a small store, that's painful. For a lawsuit you could have prevented with some upfront work, it's especially painful.

SEO Benefits

Here's the part that usually gets Shopify store owners paying attention: accessible websites tend to rank better in search. That's because many accessibility best practices overlap with SEO best practices. Descriptive alt text on product images helps Google understand what you're selling. Proper heading structure helps crawlers parse your pages. Clean, semantic HTML loads faster and gets indexed more thoroughly.

You're not going to jump to page one just by adding alt text, but every little signal helps. And the overlap between "accessible" and "well-built" is almost a circle.

Common Shopify Accessibility Issues

These are the problems I find most often when scanning Shopify stores. Yours probably has at least a few of them.

Theme Contrast Problems

This is the number one issue, hands down. Many Shopify themes ship with light gray text on white backgrounds, or trendy color combinations that look great but fail WCAG contrast requirements. Sale badges, price text, "Add to Cart" buttons, and navigation links are the usual offenders.

WCAG 2.2 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. A lot of Shopify themes don't meet this out of the box. You can check your store's contrast with our color contrast guide, which walks you through fixing the most common issues.

Product Images Without Alt Text

If you've got 200 products and none of them have alt text on their images, a screen reader user visiting your store hears... nothing useful. They get file names like "IMG_3847.jpg" or just "image." That's not a shopping experience. That's a wall.

Shopify makes it easy to add alt text to product images directly in the admin panel. I'll cover the specifics in the product page section below, and you can also check out our alt text guide for writing techniques that actually help.

Inaccessible Mega Menus

Shopify stores love mega menus. Big, beautiful dropdown navigation with categories, subcategories, and featured product images. The problem is that many of these menus are built entirely with mouse hover interactions and have no keyboard support. A keyboard user tabs to the menu trigger and then... nothing. No dropdown. No way to reach the sublinks.

Even when the dropdown does open on keyboard focus, it often traps focus inside, or the menu items aren't reachable with arrow keys. Proper mega menu accessibility requires ARIA roles, keyboard event handling, and focus management. If your theme's mega menu doesn't support this, it's a significant barrier.

Checkout Flow Issues

Shopify controls a big chunk of the checkout experience. Their checkout pages have gotten more accessible over the years, but there are still gaps. Form fields sometimes lack proper labels. Error messages don't always get announced to screen readers. And if you've customized your checkout (Shopify Plus), you may have introduced new problems.

Choosing an Accessible Shopify Theme

Your theme is the foundation of your store's accessibility. Pick a bad theme and you'll be fighting uphill forever. Pick a good one and you start with most of the basics handled.

Dawn as a Baseline

Shopify's default theme, Dawn, is the best starting point. Shopify built it with accessibility in mind, and it's one of the few themes that actually uses semantic HTML, proper ARIA attributes, and keyboard-navigable components. It's not perfect, but it's better than 90% of what's in the theme store.

If you're starting a new store, I'd honestly recommend starting with Dawn and customizing from there rather than buying a third-party theme that looks fancier but has worse accessibility.

What to Look for in a Theme

If you're evaluating a paid theme, here's what to check before buying:

• Keyboard navigation: Can you tab through the entire site without a mouse? Try the nav menu, product filtering, image galleries, and add-to-cart buttons.
• Focus indicators: When you tab through elements, can you see where you are? If the focus outline is invisible or barely visible, that's a red flag.
• Color contrast: Check the theme's demo site with a contrast checker. Pay special attention to body text, button text, link text, and price displays.
• Heading structure: View the page source or use a tool to check headings. They should go in order (H1, H2, H3) without skipping levels. One H1 per page.
• Form labels: Inspect the newsletter signup, contact form, and any other inputs. Every input needs a <label> element (visible or visually hidden).

Testing Before Buying

Most Shopify themes have a live demo. Before you spend $300, run that demo URL through our free scanner. You'll get a report showing exactly how many accessibility issues the theme has out of the box. If the demo is already full of contrast failures and missing labels, the real store will be worse once you add your content.

Shopify Accessibility Apps and Tools

The Shopify App Store has a handful of accessibility apps. Some are genuinely useful. Others are snake oil. Here's how to tell the difference.

What Apps Can Actually Fix

A well-built Shopify accessibility app can help with a few specific things:

• Alt text automation: Some apps use AI to generate alt text for product images in bulk. The quality varies, but it's better than nothing for stores with thousands of images. You should still review and edit the generated text.
• Accessibility auditing: Some apps run automated checks on your store and flag issues with a dashboard. Useful for monitoring, but they only catch what automated tools can catch (about 30-40% of all possible accessibility issues).
• Skip links and focus management: A few apps add skip-to-content links and improved focus indicators if your theme doesn't have them.

The Overlay Warning

You'll see Shopify apps that promise "one-click ADA compliance" with an accessibility widget or overlay. I need to be direct about this: overlays don't work. They add a floating toolbar to your site that lets users adjust font size, contrast, and spacing. Sounds helpful, but it doesn't fix the underlying code problems.

A screen reader user doesn't benefit from a contrast toggle. A keyboard user still can't navigate your broken mega menu. And legally, overlays have not protected businesses from lawsuits. Several major overlay companies have had their own clients sued despite using the overlay.

The accessibility community is nearly unanimous on this point. Overlays are a band-aid marketed as a cure. Spend that money on fixing your actual code instead.

Product Page Accessibility

Product pages are where the money is, so let's get them right.

Alt Text for Product Images

Every product image needs alt text that describes the product. This is both an accessibility requirement and an SEO opportunity. In Shopify's admin, click on any product, click on an image, and you'll see an "Alt text" field.

Good alt text for product images is specific and descriptive. Don't just write "shoe." Write "Men's navy blue running shoe, side view, with white sole and mesh upper." Include color, material, angle, and any details a sighted shopper would use to evaluate the product.

For more on writing effective alt text, check our guide on how to write alt text and our detailed alt text resource page.

Variant Selectors

Size, color, and material selectors are a common trouble spot. Many themes implement these as unlabeled color swatches (tiny circles of color with no text alternative) or as custom dropdown menus that aren't keyboard accessible.

Here's what good variant selectors need:

• A visible label for each group ("Size," "Color," "Material")
• Color swatches with text labels or aria-label attributes (not just a colored circle)
• Keyboard operability, so you can select a variant using Tab and Enter or arrow keys
• A clear visual indication of which variant is currently selected

If your theme uses custom JavaScript dropdowns for variants, test them with keyboard only. If you can't select a size without a mouse, your keyboard-only customers can't either.

Size Guides

Size guide modals (popups) are notorious for accessibility problems. They often open without moving focus into the modal, they lack a close button with an accessible name, and pressing Escape does nothing. If you have a size guide popup, make sure it follows the ARIA dialog pattern: move focus into it when it opens, trap focus inside, close on Escape, and return focus to the trigger button when it closes.

Reviews Sections

Many Shopify stores use review apps (Judge.me, Loox, Yotpo). These apps inject their own HTML and JavaScript into your product pages, and the accessibility of that injected code is outside your direct control. Some review apps are better than others.

Things to check in your review section:

• Star ratings need text alternatives (not just star icons with no labels)
• Review submission forms need proper <label> elements on every input
• Pagination in reviews should be keyboard accessible
• Sort/filter dropdowns need to work without a mouse

Cart and Checkout Accessibility

This is where things get a bit complicated, because Shopify controls different parts of the experience depending on your plan.

What Shopify Controls

For most stores, Shopify hosts and renders the checkout pages. You can customize colors and logos, but the underlying HTML and JavaScript are Shopify's. The good news is that Shopify has been investing in checkout accessibility, and their standard checkout is generally decent. Form fields have labels. The flow is mostly keyboard navigable. Error messages are reasonably well implemented.

That said, "decent" doesn't mean "perfect." I still see issues with dynamic address suggestions, payment method toggles, and express checkout buttons in Shopify's standard checkout. You can't fix these yourself since they're on Shopify's side. But you should be aware of them and document what you've done to address the parts you can control.

What You Can Influence

The cart page (before checkout) is entirely within your theme, so you have full control. Common cart page issues include:

• Quantity inputs: Make sure the plus/minus buttons have accessible labels like "Increase quantity" and "Decrease quantity," not just "+" and "-".
• Remove buttons: Each remove button should indicate which product it removes. "Remove Blue T-Shirt, Size M" is better than just "Remove." Use aria-label for this. Learn more about proper labeling in our accessible forms guide.
• Cart updates: When quantities change or items are removed, make sure the cart total updates and the change is announced to screen readers (use an aria-live region).
• Checkout button: This should be a real <button> or <a> element, clearly labeled "Proceed to Checkout" or similar.

Shopify Plus Customization

If you're on Shopify Plus, you can customize the checkout with Checkout Extensibility or (on older implementations) checkout.liquid. With great power comes great responsibility. Every custom field, upsell widget, or gift message box you add needs proper labels, keyboard support, and error handling. Test your custom checkout thoroughly with keyboard navigation before going live.

Collection and Navigation Accessibility

Collection pages are often the second most visited pages after the homepage. If people can't filter, sort, and browse products accessibly, they'll leave.

Filtering

Shopify's Online Store 2.0 themes include built-in filtering. The accessibility of these filters varies by theme. Things to check:

• Filter checkboxes need visible labels and proper <label> associations
• Expanding/collapsing filter groups should use aria-expanded to indicate state
• When filters are applied, the product grid should update and the change should be communicated (either through page reload or an aria-live announcement)
• Active filters should be visible and removable via keyboard

Sorting

Sort dropdowns ("Best selling," "Price: low to high," etc.) need to be native <select> elements or custom components with proper ARIA roles. Many themes use custom-styled dropdowns that look nice but lose all native keyboard support. If your sort dropdown doesn't respond to arrow keys and Enter, it's broken for keyboard users.

Breadcrumbs

Breadcrumb navigation on collection and product pages helps both accessibility and SEO. Wrap your breadcrumbs in a <nav> element with aria-label="Breadcrumb". Use an ordered list (<ol>) to convey the hierarchy. Separate items with a visual separator that's hidden from screen readers (using aria-hidden="true").

Pagination

If your collections use pagination (rather than infinite scroll), make sure the page links are keyboard accessible and the current page is indicated with aria-current="page". If you use infinite scroll or "Load more" buttons, the newly loaded products need to be announced to screen readers and keyboard focus should be managed so the user isn't sent back to the top of the page.

Testing Your Shopify Store

You've read through all of this. Now how do you actually check where your store stands?

Run an Automated Scan

Start with our free scanner. Enter your Shopify store URL and you'll get a report within about a minute. The report lists every detected accessibility issue, categorized by severity (critical, serious, moderate, minor), with explanations of what's wrong and how to fix it.

Automated scanning catches about 30-40% of accessibility issues. That includes things like missing alt text, contrast failures, missing form labels, and broken ARIA attributes. It's a great starting point and it's free.

Manual Keyboard Testing

After you've fixed the automated issues, do a keyboard walkthrough. Unplug your mouse (seriously, physically disconnect it so you're not tempted) and try to:

1. Navigate to a collection page using only Tab and Enter
2. Filter products by a category
3. Open a product page
4. Select a size and color variant
5. Add the product to cart
6. View the cart and change a quantity
7. Proceed to checkout

If you get stuck at any point, so will your keyboard-only customers. Note where you got stuck and fix those interactions first.

Screen Reader Testing

If you've never used a screen reader before, it takes a bit of practice. On Mac, press Cmd + F5 to turn on VoiceOver. On Windows, download NVDA (it's free). Navigate your store and listen. Are product names announced? Do images have descriptions? Can you tell what's in your cart?

You don't need to become a screen reader expert. Even 15 minutes of testing will reveal issues that no automated tool can catch.

Ongoing Monitoring

Accessibility isn't a one-time fix. Every time you add a new product, install a new app, or update your theme, you could be introducing new issues. Build a habit of scanning your store periodically. Run a scan after every major change.