Overview
This is the working sequence for taking a Shopify store from “no idea” to documented WCAG 2.1 AA compliance. It is ordered by risk: the steps that remove the most lawsuit exposure come first.
One honest note up front: “compliant” is not a certificate anyone can issue. It is a state you reach, document, and maintain, because stores drift with every update.
Step 1: Find out where you stand
Run the 10-minute self-check: navigate by keyboard only, zoom to 200%, try your forms. Then run a free scanner (WAVE or axe) on your home page, a product page, and the cart.
The scanner catches machine-detectable issues; the keyboard test catches what scanners miss. The split between the two is explained in why automated tools miss most issues. You need both passes to see the whole picture.
Step 2: Fix the checkout path first
Every lawsuit complaint describes the purchase flow, because a blocked purchase is the strongest fact a plaintiff can plead. Work in this order: product page, add to cart, cart, checkout.
- Every control operable by keyboard, with visible focus at each step.
- Every button announced by name: “Add to cart,” not “button.”
- Variant pickers (size, color) usable with a screen reader, announcing the selected state.
- No popup or drawer that traps focus. The trapped newsletter popup appears in complaint after complaint.
Step 3: Fix the content layer
No code needed for any of these:
- Alt text on every meaningful product image. Describe the product, not the filename. Shopify has a field for this on every image.
- Contrast. Body text needs 4.5:1 against its background. The practical walkthrough is color contrast in Shopify themes.
- Link text that makes sense on its own: “View size guide,” not “click here.”
This layer is where non-technical owners can do the most damage to their own risk profile in a single week of unglamorous work.
Step 4: Fix the template layer
Usually a few developer-hours:
- One H1 per page, headings in order without skips.
- A skip-to-content link for keyboard users.
- Form fields with real labels, not just placeholders that vanish on focus.
- The lang attribute set on the html element. Some themes miss it entirely.
The full list with fixes is the common WCAG failures guide.
Step 5: Verify and document
Self-work gets you far; it cannot verify itself. A manual audit tests your store with real assistive technology, catches what steps 1 through 4 missed, and produces the dated report that is your actual evidence of compliance work. That report is what changes your position in any future dispute.
Step 6: Maintain
Re-run the self-check after every theme update, new app, or redesign. Re-audit on a schedule. A report from three theme versions ago documents a store that no longer exists, and it reads that way to a plaintiff’s lawyer too.
Example
A supplements store runs the sequence over six weeks. Week one: self-check and scan find 31 issues. Weeks two and three: checkout path fixed, popup replaced. Week four: alt text written for 240 products, two brand grays darkened. Week five: developer fixes headings and labels. Week six: audit verifies, three missed issues fixed, report filed. Total cost was a few developer-days plus one audit, on the store’s own schedule.
Common mistake
Starting with a widget instead of the work. Overlays skip every step above while creating the feeling of progress. The reasons that fails are in overlay widgets don’t make you compliant.