Shopify Accessibility – How to Make Your Store Accessible

Making your Shopify store accessible helps everyone navigate your site and purchase your products, including people with disabilities. It opens your store to more customers, increases potential income, and lowers the risk of accessibility-related lawsuits.

In this guide, we’ll walk you through the key steps to improve Shopify accessibility across your entire store. You’ll learn how to choose the right theme, manage apps safely, and test your site so every shopper has a smoother, more inclusive experience.

How accessibility helps your Shopify store grow

Making your Shopify store accessible is not only the right thing to do. It also brings real benefits for your business. When more people can use your store, more people can buy from you.

#1. Expanded user base

An accessible store works for everyone, including people with disabilities. This means millions of shoppers who may not be able to use a typical website can now browse and buy from you.

#2. Higher conversions

Accessibility removes barriers that stop users from checking out. Clear buttons, readable text, and easy navigation help more shoppers complete a purchase.

#3. Better user experience

Accessible design creates a smoother experience for all users, not just users with disabilities. Simple layouts, clear content, and strong contrast help every shopper find what they need fast.

#4. Improved SEO

Google rewards clean code, fast load times, and clear structure. All of these come from good accessibility practices. Better SEO means more traffic and more revenue.

The real cost of ignoring accessibility

Ignoring accessibility can hurt your Shopify store in several ways. The risks are financial, legal, and emotional, especially for small and medium-sized businesses.

#1. Legal risk and lawsuits

Many countries have accessibility laws like the ADA and EAA. Non-compliance can lead to legal threats or lawsuits. These cases can cost thousands of dollars, even for small stores.

#2. Loss of customers

If users cannot read your text, use your menus, or complete checkout, they will leave. Every barrier means lost sales. Poor accessibility can quietly drain your revenue.

#3. Damage to brand reputation

Customers want brands they can trust. An inaccessible site can appear outdated or uncaring. This hurts repeat sales and long-term loyalty.

#4. Mental and emotional stress for owners

A lawsuit or customer complaint can cause huge stress for small businesses. Fixing accessibility under pressure is harder and more expensive than doing it early.

#5. Higher long-term costs

Fixing accessibility after your store is fully built can be costly. Starting with good design, accessible code, and clear content saves time and money in the long run.

How accessible is a Shopify store out of the box?

Shopify does a lot of the groundwork, then hands the rest to you.

On the platform side, Shopify states that it uses WCAG 2.2 and tests its own products to Level AA. Its first-party themes are built with semantic HTML, which helps screen readers, search crawlers, and increasingly AI shopping agents read your store. To get into the Shopify Theme Store at all, a theme has to meet a minimum average Lighthouse accessibility score of 90 across desktop and mobile. That is a real bar, and it is why a clean first-party theme is a good foundation.

But a good foundation is not a finished house. Here is where the responsibility actually sits:

• Shopify’s own products (the platform, first-party themes, hosted checkout) are the parts Shopify builds and tests.
• Your theme customizations (colors, buttons, badges, sections, custom Liquid) are yours.
• Your apps are third-party code. Shopify does not review App Store apps for accessibility, so a single popup or review app can undo a clean theme.
• Your content (product image alt text, headings, link text, PDFs) is yours.

Two more things worth being precise about, because they are often overstated. 

Horizon is now Shopify’s current theme generation and the default for new stores created in 2026. Dawn is an accessibility-oriented first-party theme, and Shopify publishes a VPAT for it tested against WCAG 2.1 A/AA.

Neither of those facts means your live store is conformant. A theme that starts accessible can fail the moment you change its colors or install an app. And a 90 Lighthouse score is not the same thing as WCAG 2.2 AA conformance; automated scores miss most of what matters. Treat Shopify’s starting point as help, not a guarantee, and plan to test your own store.

The accessibility of a Shopify store depends mainly on the theme you choose and the apps you add.

What are the best accessible Shopify themes?

As we discussed earlier, Shopify themes vary in how well they support accessibility.

Shopify’s accessibility best practices for themes says that “following only the best practices on this page [documentation] doesn’t guarantee that your theme is completely accessible.” This means even well-built themes still need testing and adjustments to meet accessibility needs.

That said, some themes do follow better accessibility practices than others. Starting with one of these gives you a stronger foundation and makes it easier to build an accessible store.

Here’s a list of both free and paid accessible Shopify themes. The free themes are selected based on accessibility testing and evaluations done by TestParty, while the paid themes come from testing and recommendations provided by AccessiBe.

Free Accessible Shopify Themes	Paid Accessible Shopify Themes
Dawn	Molla
Craft	Kairo
Studio	Boutique
Sense	Lezada

How to choose an accessible theme for Shopify

Start from a first-party theme, and you inherit a much better baseline than a random marketplace theme.

Shopify’s first-party themes, including Dawn and the newer Horizon generation, are built with semantic HTML and are designed with accessibility in mind, and every theme in the Shopify Theme Store has to clear that minimum 90 average Lighthouse accessibility score. That does not make them conformant, but it means you are not starting from zero.

When you are choosing or evaluating a theme, look for:

• Semantic structure: real headings in order, landmarks, and native controls rather than clickable divs.
• Visible focus styles that survive customization.
• Keyboard-operable navigation, including mobile menus and any mega menu.
• Sufficient default contrast that you will not immediately have to override.
• A published VPAT or accessibility documentation, which at least tells you the vendor has done the work.

Whatever theme you pick, remember that your customizations are what get tested in a lawsuit, not the pristine demo. Choose a solid base, then keep it accessible as you edit.

The most common WCAG 2.2 AA failures on Shopify themes like Dawn, with code fixes

Most Shopify theme failures are a short, predictable list, and almost all of them are fixable with a small CSS, Liquid, JavaScript, or ARIA change. Below are the failures we see most often on accessibility-oriented first-party themes like Dawn, mapped to the WCAG success criterion they break and the fix you can paste in.

A caveat before the table: these fixes assume a fairly stock first-party theme. On a theme that has been heavily edited or modified by apps, the selectors and structure shift, so treat the code as a pattern to adapt, not a guaranteed drop-in. Horizon, the 2026 default generation, uses a different block architecture, so verify against your own markup.

Common failure	WCAG criterion	Fix
Product images missing alt text	1.1.1 Non-text Content	Set alt text per image in admin; for theme-rendered images, output the media alt: <img src="{{ image | image_url }}" alt="{{ image.alt | escape }}">. Decorative images get alt="".
Low-contrast text on buttons, sale badges, and footers	1.4.3 Contrast (Minimum)	Adjust theme colors to hit 4.5:1 for normal text, 3:1 for large text and UI. Example: .price--on-sale .price-item { color: #b3261e; } instead of a light red on white.
Icon-only buttons (cart, search, close) with no name	4.1.2 Name, Role, Value	Add a label: <button type="button" aria-label="Open cart">{% render 'icon-cart' %}</button>.
Custom dropdowns and menus not keyboard operable	2.1.1 Keyboard	Use a native <details>/<summary> disclosure or add aria-expanded plus key handling; never rely on hover alone.
No visible focus indicator	2.4.7 Focus Visible	Restore a strong focus style: :focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }. Never set outline: none without a replacement.
Skipped or multiple H1 heading levels	1.3.1 Info and Relationships	One <h1> per page (the product or page title); step headings down in order without skipping.
Ambiguous link text (“read more”, “click here”)	2.4.4 Link Purpose	Make the link text describe the destination, or add context: <a href="...">Read the returns policy</a>.
Sticky header covers the focused element on scroll	2.4.11 Focus Not Obscured (new in 2.2)	Add scroll-margin-top to focusable targets so the sticky header does not hide them: :target, a:focus { scroll-margin-top: 6rem; }.
Tap targets smaller than 24px (icon buttons, swatches)	2.5.8 Target Size Minimum (new in 2.2)	Give small controls a minimum size: .icon-button, .swatch { min-width: 24px; min-height: 24px; } (aim for 44px on primary actions).
Login or checkout requires solving a puzzle or retyping a code	3.3.8 Accessible Authentication (new in 2.2)	Do not block paste on password or one-time-code fields, and allow password managers: remove any onpaste="return false" and keep autocomplete attributes intact.

Contrast is the one worth checking before you touch theme CSS, because it is the most common failure on the entire web and the easiest to get wrong when a client picks brand colors. You can test your text and background pairs against the WCAG ratios with a free colour contrast checker before editing your theme. Passing contrast does not make the store accessible on its own, but it clears out a whole category of failures fast.

For the full picture, see our guide to colour contrast and accessibility.

How to choose accessible apps for Shopify

Every app you add is code you are now responsible for, so treat app selection as an accessibility decision, not just a features decision.

Before you install, test the app the way a disabled user would use it. Most app types have a predictable failure point:

• Reviews: Can you reach and submit the review form with a keyboard? Are star ratings announced, not just shown?
• Pop-ups and email capture: Does the pop-up move focus in, close on Escape, and have a labeled close button?
• Live chat: Can a keyboard user open, type in, and close the chat window? Is it announced when it opens?
• Upsells and bundles: Are the “add” controls real buttons, and does focus behave when the cart updates?
• Search and filters: Can you operate filters and see results announced without a mouse?

When you are comparing two apps that do the same job, install both on a development store and run a quick keyboard and screen reader pass before you commit. It is far cheaper to reject an inaccessible app up front than to patch its injected markup on a live client store later. And because you often cannot force-remove an app a client is attached to, choosing well the first time is the highest-leverage thing you can do.

Which Shopify apps break accessibility, and how to fix them without removing the app?

Apps are the single most common reason a clean Shopify theme ends up inaccessible. They inject markup into your storefront that Shopify never reviewed, and that markup often ships without labels, focus management, or keyboard support.

As an agency or merchant, you usually cannot force the vendor to rewrite their widget, and you often cannot rip the app out because the client depends on it. So the practical question is not “is this vendor’s product accessible?” It is “what does the app put on my page that I can reach and fix?” You control the injected markup, the wrappers around it, the ARIA you add, labels, and focus behavior. That is the claim-vs-control line, and it is where the real fixes live.

These are the common culprits and the output you can actually reach:

• Pop-ups and email (Klaviyo). Signup and discount pop-ups frequently open without moving focus into the dialog, cannot be closed with the Escape key, and have an unlabeled close control. That is a modal problem, and the modal pattern in the next section fixes it.
• Reviews (Judge.me, Loox). Review widgets often render star ratings as unlabeled icons, use non-semantic clickable divs for “write a review,” and drop images into galleries without alt text. The review form itself is usually a plain form-accessibility problem: missing labels, unclear errors, broken keyboard order.
• Subscriptions. Subscription selectors commonly use custom radio and toggle controls that keyboard users cannot operate and screen readers cannot announce.

For the icon and label failures, you are adding accessible names to output that already exists. For example, a star-rating block rendered as bare icons:

<!-- What the review app injects -->
<div class="jdgm-star-rating">★★★★☆</div>

<!-- Add an accessible name without changing the visual -->
<div class="jdgm-star-rating" role="img" aria-label="Rated 4 out of 5 stars">
  <span aria-hidden="true">★★★★☆</span>
</div>

For a “write a review” trigger built as a div, give it a real role and keyboard behavior, or better, swap the wrapper for a button in the theme block you control:

<!-- Fragile: a div is not keyboard operable -->
<div class="loox-write-review" onclick="openReviewForm()">Write a review</div>

<!-- Reachable fix: use a real button -->
<button type="button" class="loox-write-review" onclick="openReviewForm()">
  Write a review
</button>

When an app renders a gallery of customer photos with no text alternative, add alt text at the point you can reach, whether that is the app’s own field, a theme setting, or a small script that fills empty alt attributes on the injected images. Treat every app-injected form, the newsletter field, the review form, the subscription selector, as a form-accessibility task: visible labels, a clear error message tied to its field, and a logical tab order.

One workflow note for agencies: app updates silently re-inject their own markup, so a fix you shipped last month can quietly regress after the vendor pushes an update. Re-test the app’s output after every update, not just at install.

Do accessibility overlays like accessiBe make a Shopify store compliant?

No. An overlay or accessibility widget does not make a Shopify store accessible, and it can add new barriers of its own.

The pitch is tempting: install one script, get a floating accessibility button, and you are covered. It does not work that way. Overlays sit on top of your store and try to patch problems at runtime, but they cannot fix the underlying markup, they frequently interfere with the screen readers and keyboard setups that disabled users already rely on, and they do nothing for the app and checkout flows where real failures live.

Regulators have caught up to this. In 2025 the FTC ordered overlay vendor accessiBe to pay $1 million over deceptive claims that its AI-powered widget could make any website WCAG-compliant. That is a government body finding, in a primary source, that the “one script fixes everything” promise was misleading. There is also case history of retailers using an overlay and still settling accessibility complaints and committing to WCAG conformance, which tells you an overlay is not a legal shield either.

The takeaway is not “widgets are evil,” it is that a widget is not a substitute for accessible code. The fixes in this guide (real markup, labels, focus management, keyboard support) are what actually help disabled users and reduce legal risk. If you want the full argument with examples, read our explainer on why accessibility widgets don’t make your website accessible.

How to make pop-ups and modals accessible on Shopify

Most inaccessible pop-ups on Shopify fail the same four ways: focus never moves into the dialog, the Escape key does nothing, focus can wander out to the page behind it, and the close button has no name. Fix those four things and you fix most modals on your store, whether they come from your theme or from an app.

Here is one accessible modal pattern you can reuse. It sets the right roles, moves focus in and back out, traps focus while open, closes on Escape, and gives the close control a name.

<div id="signup-modal" role="dialog" aria-modal="true"
     aria-labelledby="signup-title" hidden>
  <h2 id="signup-title">Get 10% off your first order</h2>
  <!-- modal content / form -->
  <button type="button" class="modal-close" aria-label="Close dialog">×</button>
</div>

const modal = document.getElementById('signup-modal');
let lastFocused = null;

function openModal() {
  lastFocused = document.activeElement;        // remember trigger
  modal.hidden = false;
  const focusables = modal.querySelectorAll(
    'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  focusables[0]?.focus();                       // move focus in

  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeModal();       // Esc closes
    if (e.key === 'Tab') {                       // trap focus
      const first = focusables[0];
      const last = focusables[focusables.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus();
      }
    }
  });
}

function closeModal() {
  modal.hidden = true;
  lastFocused?.focus();                         // restore focus
}

modal.querySelector('.modal-close').addEventListener('click', closeModal);

The same pattern applies when the pop-up comes from an app. If a Klaviyo signup pop-up opens without moving focus, you often cannot rewrite the vendor’s script, but you can wrap or enhance the injected container with the same roles, focus handling, and Escape support. The goal is not a perfect vendor product, it is a modal a keyboard and screen reader user can actually open, read, and close.

How to fix Shopify checkout keyboard navigation

Before you touch checkout, get clear on what is yours and what is Shopify’s, because promising to “fix checkout” when you cannot edit it is how agencies get burned.

Here is the boundary:

• You can edit: your theme’s cart page, the cart drawer, custom cart and upsell code, and any apps in that flow. These are the most common sources of keyboard failures, and they are entirely in your control.
• You cannot fully edit: Shopify’s hosted checkout. It is Shopify’s product, and deep customization is only available through checkout extensibility on Shopify Plus. On non-Plus plans you work within what Shopify provides.

For the parts you own, the keyboard failures are usually the same handful:

• Focus is lost after an action. When a cart drawer opens or an item is removed, move focus to a sensible place instead of dropping it back to the top of the page: document.querySelector('#cart-drawer h2').focus();.
• No visible focus ring in the cart. Same fix as the theme table: :focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }.
• Custom quantity and radio controls that keyboard users cannot reach. Use native <input type="radio"> and <button> elements, or add proper roles and key handling.

For Shopify’s hosted checkout, the honest position is this: Shopify publishes a VPAT for Checkout tested against WCAG 2.2 A/AA, and it reports partial support with remediation ongoing, not full conformance. So you cannot assume checkout is done, and you also cannot rewrite it on a standard plan. What you can do is test it by hand, document any barriers, and use checkout extensibility’s accessible defaults if you are on Plus. Keyboard and checkout flows are exactly the kind of thing automated tools miss, so this is where you test manually.

Our guide on how to do manual accessibility testing walks through the keyboard and screen reader passes to run.

How to make your Shopify store accessible

Making your store accessible looks a little different depending on whether you are starting fresh or improving an existing store. Below are two simple paths you can follow.

If you are starting a new Shopify store

Starting from scratch gives you a big advantage. You can build accessibility into your store from day one and avoid fixing problems later.

1. Start with an accessible theme

Choose a theme with clean code, good keyboard navigation, strong contrast, and clear structure. We have already shared a list of the best accessible Shopify themes earlier in this guide, so start there. Always test the theme demo before committing.

2. Add only apps that respect accessibility

Install apps slowly and test each one. We also included a section on how to choose accessible Shopify apps, so use those tips when selecting tools for reviews, popups, chat support, or upsells. After installing an app, check that it works with a keyboard and does not block important actions.

3. Create accessible product pages

Your products are the core of your store. Write clear product descriptions. Add meaningful alt text to product images. Use proper headings. Make sure variant names are clear and easy to understand. Avoid putting important product details only inside images.

4. Test your store before launch

Test with both automated tools and manual methods.

Navigate your store using only a keyboard. Use a screen reader to hear how your pages are read. Make sure a person with any disability can move through your store easily, find the products they want, understand the details, and complete a purchase without any hiccups.

Launching with accessibility in place helps you reach more customers and reduces problems later.

If you already have a Shopify store

If your store is already live, accessibility work starts with understanding what is broken and fixing issues in the right order. This helps you avoid wasted effort and repeated fixes.

1. Start with an accessibility audit

Before making changes, test your store. Run automated scans on key pages like the homepage, product pages, collections, cart, and checkout. Then do manual testing using only a keyboard and a screen reader. This gives you a clear list of issues to work on.

2. Review your current theme

Your theme affects every page of your store. Check for readable text, good contrast, proper headings, visible focus states, and working keyboard navigation. If your theme has major structural issues, switching to one of the accessible themes we listed earlier may be easier than trying to patch everything.

3. Review all installed apps

Apps are a common source of accessibility problems. Test popups, chat widgets, review tools, and banners added by apps. Look for focus traps, missing labels, or elements that block navigation. Remove, replace, or reconfigure apps that create barriers.

4. Fix product pages first

Product pages are where sales happen, so prioritize them. Add alt text to product images. Clean up product descriptions so they are easy to read. Use clear variant names. Make sure prices, availability, and buttons are accessible and readable.

5. Re-test after making changes

Every fix should be tested. Updates to themes, apps, or products can introduce new issues. Regular testing helps you keep the store accessible and compliant over time.

Improving an existing store takes effort, but fixing the biggest barriers first makes the process manageable and effective.

How to test your Shopify store for accessibility

Testing helps you catch problems before they affect real customers. Even if your store started out accessible, things change over time. New products, new apps, design tweaks, or theme updates can all introduce barriers without you noticing.

Your goal should be to test against the Web Content Accessibility Guidelines (WCAG). These are the global standards for making websites usable for people with disabilities. Aiming for WCAG 2.1 Level AA is a practical and realistic target for most Shopify stores.

A good testing process has three parts:

1. Automated checks to spot common issues
2. Manual testing to confirm real usability
3. User testing to understand real-world experience

Let’s go through each step.

Step 1: Run automated scans

Automated scans help you find common accessibility issues fast.

Accessibility checker extensions or other automated accessibility testing tools can detect problems like missing alt text, low contrast, skipped headings, or ARIA errors. These tools are a great starting point. They save time and point out obvious issues.

WebYes Accessibility, WAVE Evaluation Tool, Silktide Accessibility Checker, and the Accessibility Checker by WebYes are good options for running quick scans.

Step 2: Test manually for real usability

Manual testing helps uncover issues that automated tools cannot detect.

Start with a keyboard test. Move through your site using only Tab, Shift Tab, and Enter. Check if you can reach all links, menus, popups, and forms. Make sure you never get stuck.

Next, use a screen reader such as VoiceOver or NVDA. Listen carefully to how your pages are announced. Headings should follow a clear order. Buttons and links should make sense when read out loud. Images should have useful alt text.

Most importantly, confirm that someone using assistive technology can browse products and complete a purchase without obstacles.

Step 3: Get feedback from real users

Nothing replaces real user feedback. User testing gives you insights you cannot get from automated tools or manual testing.

Ask people who use assistive technologies to try your store. This may include screen reader users, keyboard-only users, or people with low vision. Their feedback will show you real barriers and help you understand how your store behaves for different users.

You can connect with people with disabilities for testing through accessibility communities or platforms like AccessWorks, Fable, or UserWay Testing Panel.

Wrapping up

Accessibility is not a one-time task. It is something you maintain and improve over time. With the right theme, careful app choices, clear product information, and regular testing, your store becomes easier for everyone to use, including people with disabilities.

Your goal is simple: a person with any disability should be able to find what they are looking for in your store easily and complete their purchase without any issues. When your store removes barriers, more shoppers can browse confidently and buy without frustration.

By following the steps in this guide, such as choosing an accessible theme, using safer apps, improving product information, and testing often, you keep your store accessible and compliant. Each improvement removes a barrier, helping more people shop confidently.