SevirantaMaking Your Shopify Store Accessible: A Practical Guide
June 5, 2026
Short answer. Shopify lays a good foundation, but doesn't deliver an accessible webshop "out of the box". Most errors sit in your theme, your content, and your apps — and those, in particular, you can often fix theme-wide in one go. Work through the six points below (contrast, alt text, headings, apps, keyboard, language) and you'll have the lion's share covered.
Why isn't Shopify alone enough?
A Shopify theme is a template. Whether your site meets WCAG depends on how that theme is built, which colours you chose, which apps you installed, and how you filled in your products. Two shops on the same theme can therefore score very differently. The good news: because much of it comes through the theme, one fix often covers hundreds of pages.
1. Check your colour contrast
The most common mistake. In your dashboard, go to Online Store → Themes → Customize → Theme settings (gear icon) → Colors and make sure text and background have at least 4.5:1 contrast (3:1 for large text). Pay particular attention to button text, price labels, links — and to the text on your Add to cart button. Set it correctly once and it applies store-wide. See colour contrast: the WCAG requirement and how to measure it.
2. Give your product photos alt text
Go to Products, click a product, and scroll to Media → click the image →
Add alt text. Describe briefly and factually what it shows
(e.g. "Black suede men's lace-up shoe"), no marketing language. Start with your
best-selling products and your homepage banners. Decorative images get an empty
alt (alt="").
3. Check your heading structure
Use headings in logical order (H1 → H2 → H3) and not just for styling. In the Shopify editor you'll see the headings reflected in your sections and rich-text blocks; don't skip levels.
4. Watch your apps
This is often the biggest source of problems. Apps for reviews, chat, pop-ups, and filters inject their own code — frequently via iframes or the Shadow DOM — into your theme, and that regularly contains buttons without a name, incorrect ARIA, or elements that can't be operated with the keyboard. So don't blindly install every app, and always test your site with the apps active. If an app turns out to be inaccessible, switch to an alternative that does respect the WCAG standards.
5. Test with the keyboard
Try navigating your site entirely without a mouse: just the Tab key and Enter. Can you reach everything — menu, filters, cart, checkout — and can you always see where the focus is? Many people navigate this way, and it exposes barriers quickly.
6. Check your language setting
Make sure your theme sets the correct language attribute, so a screen reader
chooses the right pronunciation. Go to Themes → Actions (⋯) → Edit code, open
layout/theme.liquid, and check that the <html> tag contains the language
variable: <html lang="{{ request.locale.iso_code }}">. Shopify usually handles
this well, but double-check it when using translation apps.
Common Shopify mistakes and their fix
| Shopify element | Common mistake | The fix |
|---|---|---|
| Buttons | font too light on the "Checkout" button | set contrast in theme settings to at least 4.5:1 |
| Product photos | file name as the description (product_v2.png) | add functional alt text via Media |
| Cart pop-up | close cross (X) without a label | aria-label="Close cart" in the template |
| Accessibility app | installing an overlay widget | avoid — doesn't repair your code and doesn't protect against claims |
Does an accessibility app from the Shopify App Store help?
No. Search the App Store for "accessibility" and you'll find dozens of apps that promise to make your shop compliant with one click via a widget. Don't fall for it: they don't repair your base theme, and regulators check the raw source code of your shop. Fixing it structurally in your theme and content is the only route that holds up — and it gets you better SEO and faster load times too. More on this in why an overlay widget doesn't protect you.
Does my Shopify shop then comply with the law?
These six points cover most of what an automated check detects, but "complying" goes further: it depends on your whole theme, your apps, and your content together. Whether the European Accessibility Act applies to you, you can read in our checklist. And note: an overlay app doesn't fix this — it doesn't repair your theme code.
How do I know where my Shopify shop stands now?
The fastest way: scan one page for free. You'll see per finding what's wrong and how to fix it — and because much of it runs through your theme, you often fix it for your whole store in one go. In under 60 seconds, no account.