How to Make Your Shopify Store WCAG 2.1 Compliant: A Step-by-Step Accessibility Guide

2026-05-18 WCAG Repair Team

Shopify powers over 4.5 million online stores, and a growing number of their owners are receiving demand letters and facing lawsuits they never saw coming. In 2023 alone, over 4,600 ADA-related web accessibility lawsuits were filed in federal court — a number that has climbed every year since 2018. If your store isn't meeting WCAG 2.1 AA standards, you're exposed. The good news: Shopify accessibility compliance is achievable without rebuilding your store from scratch. This guide walks you through the most common failures and exactly how to fix them.

Why Shopify Stores Fail Accessibility Audits

Shopify's base themes have improved, but they still ship with issues. Add a few third-party apps, a custom section, or a promotional banner, and you've likely introduced a dozen new violations. The most common WCAG 2.1 failures we see on Shopify stores fall into four categories:

Missing or inadequate image alt text
Inaccessible forms and checkout fields
Poor color contrast ratios
Keyboard navigation and focus management failures

These aren't edge cases. They affect real users — the 26% of American adults living with some form of disability — and they're the same issues that show up in attorney demand letters.

Step 1: Fix Your Image Alt Text

Every product image, banner, and decorative graphic needs to be evaluated. The rule is simple: images that convey information need descriptive alt text; images that are purely decorative need an empty alt="" attribute (not a missing one).

In Shopify's Liquid templates, product images often render like this:

<img src="{{ product.featured_image | img_url: '800x' }}" alt="{{ product.title }}">

This is a start, but product.title alone is usually insufficient. A better approach:

<img 
  src="{{ product.featured_image | img_url: '800x' }}" 
  alt="{{ product.featured_image.alt | default: product.title | escape }}"
>

This pulls the alt text you've entered in the Shopify admin (under each image's settings) and falls back to the product title if none exists. The real fix is going into your product library and writing meaningful alt text for every image — something like "Red women's running shoe, side view" rather than "shoe-1.jpg."

For decorative images like background textures or divider graphics, use:

<img src="divider.png" alt="" role="presentation">

Step 2: Make Your Forms and Checkout Accessible

Checkout is where Shopify accessibility compliance matters most commercially — an inaccessible checkout means lost revenue and legal exposure simultaneously.

Every form field needs a properly associated <label>. This is not the same as a placeholder. Placeholders disappear when users start typing and are not reliably read by screen readers.

Wrong:

<input type="email" placeholder="Email address">

Right:

<label for="customer-email">Email address</label>
<input type="email" id="customer-email" name="email" autocomplete="email">

For Shopify's native checkout (on Plus plans), you have limited template control. Focus your energy on contact forms, newsletter signups, and any custom sections in your theme. For cart and account forms in your theme files, the pattern above applies directly.

Also ensure error messages are programmatically associated with their fields:

<label for="postal-code">Postal code</label>
<input 
  type="text" 
  id="postal-code" 
  aria-describedby="postal-code-error"
  aria-invalid="true"
>
<span id="postal-code-error" role="alert">Please enter a valid postal code.</span>

Step 3: Audit and Fix Color Contrast

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Light gray text on white backgrounds — common in minimalist Shopify themes — almost always fails.

Use a tool like the WebAIM Contrast Checker to test your color pairs. Then fix them in your theme's CSS:

/* Before: fails contrast */
.product-price {
  color: #aaaaaa;
}

/* After: passes at 4.5:1 against white */
.product-price {
  color: #767676;
}

Pay particular attention to:
- Sale price text (often rendered in red or orange that fails)
- Button text on branded-color backgrounds
- Footer text on dark backgrounds
- Form placeholder text

Every interactive element on your store — menus, dropdowns, modals, sliders, cart drawers — must be fully operable with a keyboard. Tab through your entire store right now. If you lose track of where you are, your focus styles are broken.

The most common culprit is this CSS line, which developers add to remove the default blue outline:

/* This breaks keyboard accessibility */
* {
  outline: none;
}

Replace it with a custom focus style that works with your brand:

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

For modal dialogs (like quick-view product modals or cookie consent banners), focus must be trapped inside the modal while it's open and returned to the triggering element when it closes. This requires JavaScript:

const focusableElements = modal.querySelectorAll(
  'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];

modal.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    if (e.shiftKey && document.activeElement === firstElement) {
      e.preventDefault();
      lastElement.focus();
    } else if (!e.shiftKey && document.activeElement === lastElement) {
      e.preventDefault();
      firstElement.focus();
    }
  }
});

Screen reader users navigate by landmarks and headings. If your theme doesn't have proper semantic structure, every page visit is a disorienting experience.

Add a skip link as the first element in your theme.liquid file:

<a class="skip-link" href="#main-content">Skip to main content</a>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

Then ensure your main content area has the matching ID:

<main id="main-content" tabindex="-1">

Also verify your theme uses semantic HTML5 elements: <nav>, <main>, <header>, <footer>, <aside>. If it's using <div> for everything, add ARIA landmark roles as a stopgap: role="navigation", role="main", etc.

The Legal Reality You Can't Ignore

Achieving Shopify accessibility compliance isn't just about avoiding lawsuits — though that matters. The ADA requires that places of "public accommodation" be accessible, and courts have consistently ruled that e-commerce websites qualify. Serial plaintiffs and law firms actively scan for violations using automated tools, and Shopify stores are a frequent target precisely because their template-based structure makes them easy to audit at scale.

A demand letter typically costs $5,000–$25,000 to resolve. Full litigation runs into six figures. The fixes in this guide cost time and maybe a developer's hourly rate.

Don't Guess — Get a Full Audit

Manual spot-checks help, but a thorough Shopify accessibility compliance review requires systematic scanning against all WCAG 2.1 success criteria. Automated tools catch roughly 30–40% of issues; the rest require human review.

Scan your site for free at wcagrepair.com and get a remediation guide with exact code fixes for $8.99. You'll know exactly what's broken, where it lives in your theme, and how to fix it — no guesswork, no retainer required.