Part of the appeal of Shopify was handing hosting, updates and the payment pages to someone else. Then a customer emails to say they cannot get past your size selector with a keyboard, or a vendor offers to make your store “ADA compliant” with one app. Now you are wondering which parts of Shopify accessibility are Shopify’s job and which are yours.
The short answer: Shopify runs the platform and most of the checkout, but your theme, your apps and your content decide whether shoppers with disabilities can actually buy from you. This post sorts out who controls what, where problems usually come from, and what an owner can fix without rebuilding the store.
Who controls what on a Shopify store
It helps to split the store into layers, because each one is fixed in a different place.
| Layer | Who controls it | Typical barriers |
|---|---|---|
| Theme (home, collection, product, cart pages) | You, through theme settings and theme code | Missing focus outlines, unlabeled icon buttons, menus that only open on hover, low contrast |
| Apps (reviews, popups, upsells, chat, filters) | The app maker, plus your choice to install it | Popups that trap focus, star ratings with no text, widgets covering content |
| Content (images, product text, banners, video) | You and your team | Missing alt text, text inside images, uncaptioned video, vague link text |
| Checkout | Mostly Shopify | Limited room for you to change markup; report issues to Shopify |
Most of the barriers a customer runs into sit in the first three rows. Those three rows are also the ones you can change.
Themes: the foundation of Shopify store accessibility
Your theme builds every page a shopper sees before checkout. If the theme gets keyboard focus, headings and buttons wrong, every product inherits the problem.
Some Shopify themes are built and tested with accessibility in mind, and theme documentation sometimes says so. That is a useful signal, not a promise. A theme can start out reasonable and drift once someone edits the code, adds custom sections, or turns a heading into large bold text because it looked better.
Things to look at in the theme:
- Focus visibility. Press Tab from the top of the home page. Can you always see where you are? Some themes, or custom CSS added later, remove the outline entirely. WCAG 2.4.7 Focus Visible asks for it to be shown.
- Header and menu. Dropdowns should open by keyboard, not only on hover. The mobile menu button needs a name like “Menu” and should say whether it is open.
- Icon buttons. Search, account and cart icons often have no text name, so a screen reader announces “button” or “link” with nothing after it.
- Announcement bars and slideshows. If they rotate on their own, people need a way to pause them (WCAG 2.2.2 Pause, Stop, Hide).
- Color settings. Theme editors make it easy to pick a pale gray for body text or white text on a light banner. Check contrast against 4.5:1 for normal text.
If you are comparing themes before a redesign, test the theme’s demo store with the keyboard and a free scanner before you buy it. It takes half an hour and saves a lot of fixing later.
Apps: where most new barriers arrive
Apps add features by injecting their own code into your theme. Each one brings its own buttons, popups and markup, and the theme has no say in how well they are built. A store with a clean theme can still be hard to use because of three or four apps layered on top.
The usual suspects:
- Email signup and discount popups that appear on load, steal focus, or cannot be closed with Escape.
- Review widgets that show stars as images with no text equivalent.
- Upsell and bundle widgets that add items to the cart silently.
- Chat bubbles and floating buttons that cover the bottom of the page on phones.
- Product filters that update the results without telling a screen reader anything changed. We cover that pattern in detail in accessible product filters.
A practical rule: test each app on its own after you install it. Turn it on, use the page with a keyboard, and if it creates a trap or a silent update, contact the app maker with specific steps. If they cannot fix it, consider a different app. Fewer apps usually means fewer barriers and a faster store too.
A word on accessibility toolbar and overlay apps. They add a widget that changes fonts or contrast on request, and some claim to fix code automatically. They do not repair the theme or app markup underneath, and many disabled users find them unhelpful. We explain the reasons in what accessibility overlays actually do.
Shopify accessibility at checkout: what you can and cannot change
Shopify hosts the checkout and controls most of its code. For most stores that means you can adjust branding, logo, colors, some field settings and some text, but you cannot rewrite how the form is built. The available options also vary by plan and change over time, so check Shopify’s own documentation for what your plan allows today.
What that means in practice:
- Keep your own changes safe. If you can set colors for the checkout, check that text and buttons still meet contrast. A light brand color on white buttons can undo a lot of work.
- Test it anyway. Run through a test order with the keyboard and, if possible, a screen reader. You want to know where shoppers might struggle even if you cannot change it directly.
- Report what you find. Write down the step, what you pressed, what you expected and what happened, and send it to Shopify support. Specific reports are much easier to act on.
- Fix the cart page. The cart usually lives in your theme, not the checkout. Quantity controls, remove buttons, discount fields and the checkout button are all yours.
Any checkout extensions or apps you add are your responsibility to test, since they bring their own markup into those steps.
Content you control every week
Even a well-built theme fails if the content does not keep up. On Shopify, this is mostly in the product editor, the collection pages and the theme’s banner and slideshow sections.
- Add alt text to product images and banners. Describe what the shopper would learn from the image.
- Keep sale messages and policies in real text, not baked into a banner image.
- Caption any product videos.
- Write link and button text that makes sense on its own: “Shop winter coats” rather than “Shop now” repeated six times.
- Use the heading options in the editor for structure, not for size.
An order of work that fits a busy owner
You do not need to tackle Shopify accessibility all at once. This order puts the biggest wins first:
- Run a free scan on the home page, a collection page, a product page and the cart. Note missing alt text, empty buttons and contrast errors.
- Do a keyboard pass through the same pages and a test purchase. Note every place you get stuck or lose sight of focus.
- Switch off or replace any app that causes a trap you cannot work around.
- Fix theme-level problems: focus styles, menu behavior, icon button names, color settings.
- Clean up content: alt text, banners, video captions, link text.
- Write down what you changed and test again after each theme update or new app.
Theme code changes are where many owners bring in help. We build and maintain stores through our Shopify development work, and the routine checks fit naturally into ongoing Shopify store maintenance. Whatever platform you sell on, the full shopping journey is laid out in building an accessible online store, and for the bigger picture of audits and fixes, our accessibility services for US businesses.
We are developers, not attorneys, so treat this post as technical guidance only. A demand letter about your store belongs with a lawyer, and the repair work can run alongside their advice.
Frequently asked questions
Is Shopify accessible out of the box?
Shopify gives you a platform and a set of themes, and some of those themes are built with accessibility in mind. Whether your store is usable depends on the theme you picked, how it was customized, the apps you installed and the content you added. Treat the platform as a starting point and test the store you actually have.
Can I change the Shopify checkout to fix accessibility problems?
Only partly. The checkout is hosted and largely controlled by Shopify, so most owners can change branding, some fields and some wording, but not rewrite its markup. If you find a barrier there, record it with steps to reproduce and report it to Shopify, and make sure your cart page and everything before checkout is solid.
Do I need a developer to fix accessibility on Shopify?
Not for everything. Alt text, link wording, heading choices, video captions and color settings can all be handled in the admin and the theme editor. Changing how the theme builds menus, buttons and focus styles usually means editing Liquid, CSS or JavaScript, which is where someone who knows Shopify themes earns their keep.
Should I switch from Shopify to WordPress for accessibility?
Usually not for accessibility alone. Both platforms can host an accessible store or an inaccessible one. The theme, the add-ons and the care taken with content matter far more. Switching platforms is a bigger decision that should rest on your wider business needs, not on one round of accessibility fixes.
If your store runs on WooCommerce instead, the same layers apply there, with far more control over the checkout. For that setup, our accessible WooCommerce store page explains how we test and fix it.
Next in this series: Accessible Booking Forms: Dates, Time Slots, Confirmation
