← Back to field log

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

By SiteRemora Team

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.

the same product image, two waysWCAG 1.1.1
empty alt
<img src="sneaker-04.jpg" alt="">

A screen reader skips it or reads the filename. The shopper never learns what the product looks like.

described
<img
  src="sneaker-04.jpg"
  alt="Walnut leather sneaker, side view"
>

Announced as a real description — the same information a sighted shopper gets.

▸WCAG 1.1.1. SiteRemora drafts the description from the actual photo, then re-checks it when the image changes.

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.

Drag to fix the contrastWCAG 1.4.3
The Compare-at Snowboard
$885.95$785.95Sale
Only a few left at this price
contrast ratio2.24:1
darker — easier to readlighter
  • ✗Normal text needs 4.5:1
  • ✗Large text needs 3:1

▸This is the call SiteRemora surfaces but never makes for you: contrast is a brand decision, so it flags the failing ratio and the pixels responsible — your palette stays yours.

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 . 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.

labelling a fieldWCAG 3.3.2
placeholder as a label
<input
  type="email"
  placeholder="Email address"
>

The placeholder disappears the moment someone types, and many screen readers never announce it at all.

a real, linked label
<label for="email">Email address</label>
<input id="email" type="email">

Announced on focus, every time — WCAG 3.3.2 satisfied.

▸A placeholder is a hint, not a label.

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

or 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

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 —

,
shopify accessibilitywcag 2.2 aaada complianceaccessibility checklistecommerce