# How to Make Your Shopify Store Accessible: A Practical WCAG 2.2 AA Checklist

> A step-by-step checklist for bringing your Shopify store to WCAG 2.2 AA — the exact issues plaintiffs cite, where they hide in your theme, and how to fix each one.

**Provider:** SiteRemora (https://siteremora.com)
**URL:** https://siteremora.com/blog/shopify-accessibility-checklist

## The Fastest Way to a More Accessible Shopify Store

If you run a Shopify store and you want it to be accessible — because the law now requires it, because a competitor got a demand letter, or simply because roughly one in four adults has a disability and you would like them to be able to buy from you — this is the checklist to work through.

It is written for merchants, not developers. Each item tells you what the requirement is, which WCAG success criterion it maps to, where it hides in a typical Shopify theme, and how to fix it. Work top to bottom and you will close the violations that appear in the overwhelming majority of ADA and European Accessibility Act complaints.

## Start With the Pages That Get You Sued

You do not have to fix your entire store at once. Accessibility complaints cluster on a predictable set of pages, because those are the pages a plaintiff's attorney tests first:

- **Home page** — the first thing anyone lands on
- **Collection / category pages** — product grids, filters, sort controls
- **Product pages** — image galleries, variant pickers, quantity steppers, add-to-cart
- **Cart and mini-cart drawer** — theme-controlled, high-risk, frequently broken
- **Search** — the input, the results, the "no results" state

Shopify's hosted checkout is Shopify's responsibility and is reasonably accessible. Everything before checkout is yours. Fix these five surfaces first and you have covered the customer journey that actually gets audited.

## The 12-Point Checklist

### 1. Give every image a real text alternative — WCAG 1.1.1

Every product photo, collection image, lifestyle shot, and content image needs alt text that describes what it shows. Shopify gives you an "Alt text" field on every image (**Products → [product] → Media → click an image**), but it is optional and usually left blank.

Good: "Walnut leather sneaker, side view." Bad: "IMG_4829.jpg", "image", or an empty attribute on a meaningful photo. Purely decorative images should have an *empty* alt (`alt=""`) so screen readers skip them.

### 2. Fix color contrast on text, buttons, and badges — WCAG 1.4.3

Body text needs a contrast ratio of at least 4.5:1 against its background; large text needs 3:1. Shopify's theme editor lets you pick any color without ever warning you when the combination fails. The usual offenders: light-gray fine print, sale badges, muted navigation links, announcement-bar text, and button labels.

### 3. Label every form field — WCAG 3.3.2, 1.3.1

Every input — search, newsletter signup, contact form, address fields, login — needs a programmatically associated `<label>`. A placeholder is not a label; it disappears when the user starts typing and many screen readers ignore it. If a field uses only a placeholder or an icon, it is a violation.

### 4. Name every icon-only button and link — WCAG 4.1.2

Cart icons, search icons, hamburger menus, close ("×") buttons, social links, and swatch pickers are announced as a bare "button" or "link" unless they carry an `aria-label` or visually hidden text. The label should describe the action ("Search products", "Close dialog", "View cart, 3 items"), not the picture.

### 5. Make everything operable by keyboard — WCAG 2.1.1

Every control a mouse can use, a keyboard must be able to reach and activate with Tab and Enter/Space: menus, quick-add buttons, variant swatches, carousel arrows, accordion toggles. Interactive elements built from `<div>` or `<span>` instead of real buttons and links are the most common way this breaks.

### 6. Eliminate keyboard traps — WCAG 2.1.2

When a modal, cart drawer, or mega-menu opens, focus should move into it and Tab should cycle *within* it until it is closed — then return to where it was. A "trap" is when focus gets stuck behind an open drawer or escapes to the page underneath. Cart drawers and app-injected popups are the usual culprits.

### 7. Make the focus indicator visible — WCAG 2.4.7

Keyboard users need to see where they are. Many themes and resets include `outline: none` with nothing to replace it, leaving no visible focus ring. Every focusable element needs a clear, high-contrast focus state.

### 8. Use a logical heading structure — WCAG 1.3.1

Each page needs exactly one `<h1>` and headings that descend in order (h1 → h2 → h3) without skipping levels. Shopify's section-based architecture makes it easy to jump from an h1 to an h4 when sections render in an unexpected order. Screen reader users navigate by headings, so a broken outline is a broken map.

### 9. Add landmark regions and a skip link — WCAG 1.3.1, 2.4.1

Your `theme.liquid` layout should wrap content in semantic landmarks — `<header>`, `<nav>`, `<main>`, `<footer>` — and offer a "Skip to main content" link as the first focusable element so keyboard users can bypass the header on every page.

### 10. Set the page language — WCAG 3.1.1

The `<html>` element needs a `lang` attribute (`lang="en"`) so assistive technology pronounces your content correctly. It is a one-line fix that a surprising number of themes still miss.

### 11. Don't rely on color alone — WCAG 1.4.1

If "sale" pricing is only distinguishable by being red, or a required field is only marked by a red border, colorblind users miss it. Pair color with text, an icon, or an underline.

### 12. Respect motion preferences — WCAG 2.2.2, 2.3.1

Auto-advancing carousels, autoplaying video, and parallax effects need a pause control and should honor the user's `prefers-reduced-motion` setting. Nothing should flash more than three times per second.

## Where These Hide in a Shopify Theme

You rarely have to touch a hundred files. The violations concentrate in a few:

- `layout/theme.liquid` — lang attribute, landmarks, skip link
- `sections/header.liquid` and `snippets/*cart*.liquid` — icon buttons, keyboard traps, focus
- `snippets/product-card.liquid` and `product-media.liquid` — image alt text, swatch labels
- `sections/main-product.liquid` — variant pickers, quantity steppers, add-to-cart
- Your theme's CSS / settings — contrast values and focus outlines

And then there are your apps. Every app that injects front-end markup — reviews, upsells, chat, wishlists — can add its own violations that no amount of theme editing will fix. Audit those separately.

## Test It the Way a Plaintiff Would

You do not need expensive tooling to catch most of this:

- **Unplug your mouse.** Navigate the whole purchase flow with Tab, Enter, and Escape. If you get stuck, so does a keyboard user.
- **Turn on a screen reader.** VoiceOver ships with macOS and iOS; NVDA is free on Windows. Try to buy something with your eyes closed.
- **Run an automated scan.** Lighthouse (built into Chrome DevTools) and the free axe or WAVE extensions catch contrast, alt text, labels, and structure automatically.

Automated tools catch roughly a third to a half of issues; the keyboard and screen-reader passes catch the rest.

## Keep It Fixed

Here is the part the checklist can't solve on its own: **accessibility does not stay fixed.** Every theme update, every new app, every product description pasted from a Google Doc can reintroduce a violation you already closed. A store that passes today can fail next Tuesday without a single intentional change.

That is the gap SiteRemora is built for. It connects to your Shopify store, scans these same surfaces continuously, locates the exact line of Liquid, CSS, or HTML responsible for each violation, and fixes it in your theme code — not in an overlay. Alt text is drafted from the actual product photo. Contrast failures are reported with exact ratios so your brand colors stay your decision. Every change is stored with its before and after and can be reverted in one click. When you install a new app or update your theme, it re-scans and catches what changed.

Work this checklist once by hand to understand your store. Then let something keep it clean.