Shopify accessibility checklist: what to fix first (2026)

This checklist is ordered by impact on a purchase, not by WCAG number. Each item says how to check it yourself and who usually fixes it: you in the admin, a developer in the theme code, an app vendor, or Shopify. Working through it makes your store easier to use. It doesn't make a store "ADA compliant", and no checklist can promise that.

Before you start: a 10-minute self-test

You don't need special software for the first pass:

1. Unplug the mouse (or don't touch the trackpad). Open your store in a private window.
2. Press Tab repeatedly. Can you always see where you are? Can you open the menu, close the popup, choose a variant, add to cart, change the quantity in the cart and get to checkout?
3. Press Escape in every popup, drawer and menu. Does it close, and does focus go back to where you were?
4. Zoom to 200%, then 400% (Cmd or Ctrl and +). Does anything get cut off or need sideways scrolling?
5. Run a free automated scan on your home, a collection and a product page: WAVE, Lighthouse (built into Chrome DevTools) or the axe DevTools extension.
6. If you have a Mac or iPhone, turn on VoiceOver (Cmd+F5 on a Mac) and try to add a product to the cart.

Anything that fails in steps 2–3 goes to the top of the list.

1. Fix first: anything that blocks a purchase

These affect whether some customers can buy at all.

• ☐ Popups can be closed with the keyboard. The newsletter or discount popup has a real close button, Escape closes it, and focus moves into it when it opens. Who: app settings or theme code; app vendor if the popup is an app.
• ☐ Variant pickers work without a mouse. Color and size options can be reached with Tab and changed with the arrow keys, each one has a name a screen reader can read ("Slate", not "button"), and sold-out options say so in text. Who: theme code. (How to fix swatches.)
• ☐ Add to cart is announced. After adding, a screen reader user hears what was added, not silence. Who: theme code.
• ☐ The cart drawer behaves like a dialog. Focus moves into it, Tab stays inside it, Escape closes it, and focus returns to the button that opened it. Who: theme code. (Cart drawer fix guide.)
• ☐ Quantity and remove controls are labeled. "Increase quantity", "Remove Ridgeline 40L Pack", not an unnamed "+" or "×". Who: theme code.
• ☐ The checkout button is reachable and named. Who: theme code. (The checkout itself is covered at the end.)

2. Navigation and focus

• ☐ Focus is always visible. A clear outline or ring on every link, button and field. A common cause of failure is a theme or custom CSS rule like *:focus { outline: none }. Who: theme code.
• ☐ Menus open from the keyboard, not on mouse hover only, and close with Escape. Who: theme code.
• ☐ A "Skip to content" link is the first thing Tab reaches. Who: theme code (most current themes have one; check it still works after customizations).
• ☐ Icon buttons have names. Search, cart, account and menu icons are announced as "Search, button", "Cart, 2 items", not "button". Who: theme code.
• ☐ Slideshows can be paused, and don't move while you're tabbing through them. Who: theme editor (turn off auto-rotate) or theme code.

3. Forms and messages

• ☐ Every field has a visible label. Placeholder text inside the box doesn't count. Check newsletter forms, search, contact and the collection "Sort by" dropdown. Who: theme code; app vendor for app forms.
• ☐ Errors say what to fix, in text, next to the field: "Enter an email address in the format name@example.com", not just a red border. Who: theme code.
• ☐ Success messages are announced ("Thanks, you're subscribed"). Who: theme code.
• ☐ Filter results are announced. When a shopper applies a filter, the new product count is read out. Who: theme code.

4. Contrast and text alternatives

These are the most common failures across the web. WebAIM's 2026 scan of the top one million home pages found low-contrast text on 83.9% of them and missing image alt text on 53.1% (WebAIM Million 2026).

• ☐ Text contrast is at least 4.5:1 (3:1 for large text), including sale badges, prices, "compare at" prices, footer links and text over images. Who: the admin (theme editor color schemes) for many cases; theme code when colors are hard-coded.
• ☐ Buttons, form borders and focus rings have at least 3:1 contrast against what's around them. Who: admin color schemes or theme code.
• ☐ Product images have alt text that describes the product as shown: "Ridgeline 40L Pack in Slate, side view", not "IMG_2041.jpg". Who: the admin: Products → select a product → click an image → Add alt text.
• ☐ Decorative images are silent. Background patterns and repeated card images shouldn't be read out. Who: theme code.
• ☐ Links make sense on their own. "Read our shipping policy", not "Click here". Who: the admin (pages, rich text sections).
• ☐ Headings are in order. One main heading per page, with sections below it in order. Who: admin (rich text heading levels) and theme code.
• ☐ The page language is set (<html lang="en">). Who: theme code (current Shopify themes do this; check custom ones).

5. Motion, video and zoom

• ☐ Zoom isn't disabled. Pinch-zoom works on a phone. Who: theme code (remove user-scalable=no from the viewport tag if present).
• ☐ Content reflows at 400% zoom without sideways scrolling (WCAG 1.4.10). Who: theme code.
• ☐ Videos have captions, and autoplaying video can be paused. Who: the admin (upload captions with the video host) and theme settings.
• ☐ Animations respect "reduce motion" settings on the shopper's device. Who: theme code.
• ☐ Tap targets are big enough: at least 24 × 24 CSS pixels for swatches, dots and small icons (WCAG 2.5.8). Who: theme code.

6. Apps and widgets

Apps add their own markup, and it often brings its own barriers: reviews widgets with unlabeled star ratings, chat bubbles that can't be closed with a keyboard, upsell popups that steal focus.

• ☐ List every app that adds something to your storefront.
• ☐ Run the keyboard test from the top of this page against each widget.
• ☐ Check each app's settings for an accessibility option, ask the vendor about it, or consider an alternative. Who: app vendor.

One app category to avoid: accessibility overlay widgets. A toolbar or script that runs on top of the page doesn't change your theme code, so it doesn't fix the issues on this list. In April 2025 the FTC finalized an order requiring overlay vendor accessiBe to pay $1 million and barring it from claiming, without evidence, that its automated tool can make any website WCAG-compliant (FTC). Our guide on overlays vs code fixes explains what changes for screen reader users.

7. Checkout

Checkout is Shopify-hosted on every plan. On non-Plus stores we report checkout issues to Shopify rather than fix them. On Shopify Plus, custom checkout extensions can be in scope.

What you control on any paid plan:

• ☐ Checkout colors and fonts in Settings → Checkout → Customize: make sure buttons and text keep 4.5:1 contrast with your brand colors. Who: admin.
• ☐ Everything before checkout: the cart and the path to it (sections 1–3 above).

More detail in our Shopify checkout accessibility guide.

What you can fix in the admin this week (no code)

• Alt text for product, collection and blog images.
• Theme color schemes that keep text readable (test with a contrast checker such as WebAIM's).
• Turning off slideshow auto-rotate.
• Heading levels and link text in pages and rich text sections.
• Captions for product videos.
• Popup app settings: delay, frequency, and any accessibility option the app offers.

Everything else on this list, especially section 1, usually needs a developer who knows Shopify themes. Our guide to the most common Shopify accessibility audit findings shows the code for each.

Why order matters

Fixing 50 contrast warnings while the cart drawer still traps keyboard users improves the score and not the store. Automated scans can't see most of section 1: WebAIM notes that automated tools cannot detect every WCAG failure, so a page with no detected errors is not necessarily accessible (WebAIM Million 2026). Start where shoppers get stuck.

Sources

• WebAIM, The WebAIM Million (2026), WAVE and Contrast Checker
• W3C WAI, WCAG 2.2, Understanding 1.4.10 Reflow and 2.5.8 Target Size (Minimum)
• Shopify, Theme accessibility best practices
• Shopify Help Center, Checkout settings
• US Federal Trade Commission, FTC approves final order requiring accessiBe to pay $1 million (April 22, 2025)

---

Want this checked on your store? Our Accessibility Review covers your key templates with automated scans plus manual keyboard and screen reader testing, and gives you a prioritized issue list mapped to theme files. It's not a certified audit or a VPAT. If you want the fixes too, we make them in your theme on staging and show you the before and after. Ask about a review.