EAA compliance for Shopify: WCAG 2.1 AA checklist & fixes

What the EAA actually requires from a Shopify site

For a Shopify store the EAA obligation lands squarely on the Liquid theme, because the storefront, cart drawer, and account pages are all rendered from theme templates rather than by Shopify itself. Shopify Checkout is now Shopify's own hosted, accessibility-hardened surface, so your remediation scope is the theme, any Sections/Blocks you added in the Customizer, and third-party apps that inject markup. In practice EN 301 549 forces you to fix theme-level tokens (contrast, focus rings), Liquid-rendered form labels, and JavaScript widgets like the slide-in cart and gallery so keyboard and screen-reader users can complete a purchase end to end.

The typical Shopify merchant is a B2C SMB or DTC brand selling physical goods to EU consumers, which puts them clearly in scope with little chance of the microenterprise services exemption applying to a product-selling shop. These merchants rarely have turnover in the range that triggers France's percentage-of-turnover penalties, so the realistic exposure is a fixed per-breach fine (Germany up to €100,000, Spain up to €600,000 for serious cases) plus the operational hit of a market-surveillance authority ordering the store to stop selling until it conforms. For most Shopify owners the reputational and takedown risk outweighs the headline fine number.

Most Shopify remediation is done by a single theme developer or a Liquid-comfortable freelancer working directly in the theme code editor and the Customizer, not a full engineering team. Start from an accessibility-vetted theme (Dawn, Sense, Studio), fix contrast and labels through theme settings and small Liquid/CSS edits, then patch the cart drawer and gallery JavaScript for focus handling. A realistic timeline is one to three days of developer time, and you should avoid overlay apps entirely since they mask rather than fix the underlying HTML.

Top WCAG failures we see on Shopify sites

Across hundreds of Shopify scans, the same handful of issues show up over and over. None of them require ripping the theme apart — most are fixable in a few hours by someone comfortable in the platform's editor or template files.

• Color contrast on sale badges, "Add to cart" buttons and theme accents

  Themes default to brand colors that often fail the 4.5:1 ratio for body text or 3:1 for large text. Sale prices in red on white and gray placeholder text are the two most-flagged issues in our scans.

  1.4.3 Contrast (Minimum) — Level AA

• Cart drawers and quick-view modals trap focus or break Esc

  Shopify themes commonly use a slide-in cart drawer that does not move focus into the dialog or restore focus on close. Users on a screen reader or keyboard get stuck on the page background.

  2.1.2 No Keyboard Trap, 2.4.3 Focus Order — Level A

• Product image gallery is mouse-only

  Many themes implement zoom, swatch swap, and gallery navigation with mouse handlers (mouseenter/click) but no keyboard equivalents (Enter/Arrow), failing keyboard users.

  2.1.1 Keyboard — Level A

• Form fields without programmatic labels

  Customer registration, address, and contact forms frequently use placeholder-only inputs or visually-hidden labels that screen readers do not pick up. Newsletter signups in the footer are the most common offender.

  1.3.1 Info and Relationships, 4.1.2 Name, Role, Value — Level A

• Decorative product carousels auto-advance without controls

  Hero sliders that auto-rotate faster than 5 seconds with no pause/stop control fail WCAG and create distraction for users with vestibular disorders.

  2.2.2 Pause, Stop, Hide — Level A

Concrete code fixes for Shopify

Below are copy-paste fixes for the most common Shopify issues. They assume you have access to your theme code or the platform's custom-code injection panel. If you cannot edit code directly, share these snippets with whoever maintains the site — every one of them is a ten-minute change.

<button type="button" class="cart-toggle" aria-label="Open cart with {{ cart.item_count }} items">
  {% render 'icon-cart' %}
</button>

:where(button, a, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--color-foreground);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(8 145 178 / 0.25);
}

// Open
const lastFocused = document.activeElement;
drawer.removeAttribute('inert');
drawer.querySelector('[autofocus], button, a').focus();

// Close
drawer.setAttribute('inert', '');
lastFocused?.focus();

Tools and plugins worth installing first

• Theme Inspector (Shopify) — confirms HTML is semantic before deeper audits

• axe DevTools browser extension for ad-hoc page checks

• Certvo public scan — crawls product, collection, and cart pages and groups issues by template

How to scan a Shopify site without missing anything

Automated scanners catch about 30–40% of WCAG issues; the rest need manual review. The good news is that the 30–40% includes the most expensive issues to remediate after the fact, so an automated scan is the cheapest way to get unstuck. Run one before you change a line of theme code.

• Scan at minimum: home, /collections/all, a product page, /cart, and the checkout login page.

• Re-scan after changing the theme via Customize — most regressions come from new sections.

• Run a logged-in scan against the customer account area; it is excluded from public crawls.