Your Shopify Theme Is Why You're Not ADA Compliant — And Here's How to Fix It

Why Shopify Stores Get Sued

Plaintiff law firms use automated scanners to identify WCAG violations on high-traffic pages. Shopify powers over 4 million active stores, making it a high-yield target. The violations that trigger demand letters aren't complex — they're the same four structural issues that appear in most Shopify themes:

1. Product images missing alt text — Shopify themes render alt="{{ image.alt }}", but if the merchant hasn't filled in alt text in the product editor, the attribute outputs as empty or as a filename. Plaintiff scanners flag empty alt text on product images as a critical WCAG 1.1.1 violation on every product page.
2. Cart and checkout form labels missing — Input fields for email, address, and shipping information are frequently rendered with placeholder text but without associated <label> elements. Screen readers cannot identify the purpose of these fields.
3. Mobile navigation button with no accessible name — The hamburger menu icon is typically an SVG with no text. Users navigating by keyboard or screen reader encounter a button they can't identify.
4. Theme color contrast failures — Price text, secondary navigation links, and product badges in many themes render below the 4.5:1 contrast ratio required by WCAG 1.4.3.

The 4 Violations in Your Liquid Templates — With Exact Fixes

Violation 1: Product images with empty or missing alt text

Shopify themes use image.alt to populate alt attributes. If the merchant hasn't added alt text in the product editor, this renders as an empty string — a WCAG 1.1.1 failure on every product page. Some themes skip the attribute entirely.

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

<img src="{{ image | img_url: '800x' }}"
     loading="lazy"
     alt="{{ image.alt | default: product.title | escape }}">
{%- comment -%} image.alt | default: product.title ensures no empty alt on product images.
  Escape prevents XSS if merchant entered HTML in alt text field. {%- endcomment -%}

Apply this pattern anywhere you render product images: product templates, collection templates, featured product sections, cart line items, and related products.

Violation 2: Cart form inputs without label associations

Many Shopify themes use placeholder text instead of proper form labels. Placeholder text disappears when users start typing, it's not read by all screen readers as a label, and it fails WCAG 1.3.1 (Info and Relationships) and 3.3.2 (Labels or Instructions).

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

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

/* Add this CSS to your theme — visually hidden but screen reader accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Violation 3: Mobile navigation button with no accessible name

The hamburger menu icon — typically a three-line SVG — renders as a button with no text label. When a screen reader user reaches this button, it announces "button" with no context. WCAG 4.1.2 (Name, Role, Value) requires all interactive elements to have an accessible name.

<button class="mobile-nav-toggle">
  <svg viewBox="0 0 24 24">...</svg>
</button>

<button class="mobile-nav-toggle"
        aria-label="Open navigation menu"
        aria-expanded="false"
        aria-controls="mobile-menu">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    ...
  </svg>
</button>

// Update aria-label and aria-expanded via JavaScript when the menu opens:
document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
  const isOpen = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', String(!isOpen));
  this.setAttribute('aria-label', isOpen ? 'Open navigation menu' : 'Close navigation menu');
});

Violation 4: Theme color contrast failures

WCAG 1.4.3 requires a minimum 4.5:1 contrast ratio between text and background for normal text, and 3:1 for large text (18pt+ or 14pt bold). Common offenders in Shopify themes:

• Gray sale price text on white background (e.g., #999999 on white = 2.85:1 — fails)
• "Sold out" badge text in light gray on light background
• Footer link text in dark gray on dark background
• Navigation links in mid-gray on white

/* Sale price: was #999999 (2.85:1 fail) → #767676 passes at exactly 4.54:1 */
.price--sale { color: #767676; }

/* Footer links: was #888888 (3.54:1 fail on #1a1a2e bg) → #9a9aac passes */
.footer__link { color: #9a9aac; }

/* Badge text: ensure dark text on colored backgrounds */
.badge--sold-out {
  background: #e5e7eb;
  color: #374151; /* 9.73:1 — well clear */
}

Why Accessibility Overlays Don't Work for Shopify Stores

The most common response Shopify merchants have when they hear about ADA compliance is to install an overlay widget. AccessiBe, UserWay, and AudioEye all offer Shopify apps. They're all wrong solutions.

Here's why overlays fail specifically for Shopify:

The Shopify ADA Lawsuit Pattern

The typical timeline for a Shopify ADA lawsuit:

1. Automated scan (0 days). A plaintiff firm's scanner identifies WCAG violations on your store — usually alt text on product images and form label issues on the cart/checkout flow.
2. Demand letter (30–90 days later). A letter arrives citing specific violations, specific pages, and citing Title III of the ADA (and California Unruh Act or New York HRL if applicable). The letter requests a remediation commitment and often a settlement payment.
3. Settlement or litigation (60–180 days). Most Shopify merchants settle. $25,000–$65,000 is typical. California Unruh Act cases are the most expensive — $4,000 per individual violation in statutory damages, and cases often allege 5–15 individual encounters with inaccessible content.

Quick Implementation Checklist for Shopify Owners

• 1
  Scan your store first. Run a free ADAFlags scan on your homepage, a product page, and your cart URL. This tells you exactly which violations are present before you or your developer touches code.
• 2
  Add alt text fallbacks in Liquid. Find every <img> tag that renders product images and add | default: product.title | escape to the alt attribute. Takes 10–30 minutes depending on theme complexity.
• 3
  Add alt text in the product editor. For your most important products, add real descriptive alt text via Shopify admin → Products → [product] → click image → alt text. This is the highest-quality fix — the Liquid fallback is a safety net.
• 4
  Fix form labels in cart and account templates. Add <label> elements with matching for / id attributes to every input in cart.liquid, customers/login.liquid, and customers/register.liquid.
• 5
  Add aria-label to the mobile menu button. Find the hamburger button in your theme's header.liquid or nav.liquid and add aria-label="Open navigation menu" and aria-expanded="false".
• 6
  Check contrast on price text and badges. Run Chrome DevTools contrast check on sale price, secondary text, and badge text. Target 4.5:1 minimum. Adjust colors in your theme's CSS.
• 7
  Re-scan after changes. Run ADAFlags again to confirm violations are resolved. Keep the scan results — this documents your remediation effort and supports a good faith defense.

Frequently Asked Questions

Are Shopify stores required to be ADA compliant?

Yes. Title III of the Americans with Disabilities Act applies to places of public accommodation, and federal courts have consistently held that websites — including e-commerce stores — qualify. Shopify merchants have received demand letters and been sued under both the ADA and state accessibility laws (particularly California's Unruh Act and New York's Human Rights Law).

Does Shopify make my store ADA compliant automatically?

No. Shopify provides a platform, but ADA compliance depends on your theme's HTML output and how you've configured it. The default Dawn theme scores better than many third-party themes, but still commonly has missing alt text on collection images, unlabeled filter controls, and inadequate focus indicators. Third-party themes add substantially more risk.

Will an accessibility overlay make my Shopify store ADA compliant?

No. Overlays like AccessiBe, UserWay, and AudioEye have been condemned by the National Federation of the Blind, fined by the FTC, and consistently ruled insufficient by courts. Shopify merchants who installed overlays have been sued anyway. The violations exist in your Liquid templates and rendered HTML — overlays run after page load and cannot fix source-level issues that screen readers and plaintiff scanners evaluate.

How much does an ADA lawsuit cost a Shopify store?

Shopify-related ADA settlements typically range from $25,000 to $65,000, plus attorney fees. California Unruh Act claims can add $4,000 per violation in statutory damages. The total exposure for a California-based or California-accessible store with multiple violations can reach six figures.

What are the most common ADA violations in Shopify stores?

The top four are: product images without alt text, cart and checkout forms missing label associations, the mobile navigation button having no accessible name, and theme color schemes that fail 4.5:1 contrast ratio requirements. These four violations appear in the vast majority of Shopify ADA demand letters.

Related reading: Not sure whether to use an overlay? Read why every overlay vendor has the same structural problem: Best AccessiBe Alternatives · UserWay Alternatives · AudioEye Alternatives. For the complete WCAG violation list and fix guide: ADA Compliance Checklist for Small Businesses. For the full legal picture: ADA Lawsuits in 2025: What Your Business Needs to Know.