The WCAG 2.2 AA Checklist for Shopify Stores

WCAG 2.2 AA is the version and level almost every accessibility law now points to, and it is the target we recommend for any Shopify store. This is a working checklist: the success criteria that matter, organized by the four POUR principles, each mapped to where the issue actually lives in a Shopify theme.

Build to WCAG 2.2 AA once and you satisfy the older regimes at the same time. WCAG 2.2 is a superset of 2.1, so meeting it also meets the US ADA settlement standard, the EU’s EN 301 549 (WCAG 2.1 AA), and the UK, Canadian, and Australian rules. One body of work covers all of them.

Key takeaways

• WCAG 2.2 AA is the current legal benchmark. Conforming to it also satisfies WCAG 2.1 AA and every regime built on it.
• Level AA conformance means meeting every Level A and every Level AA success criterion. AAA criteria are not required.
• WCAG 2.2 added 9 success criteria over 2.1 and removed one (4.1.1 Parsing). Six of the nine sit at Level A or AA.
• Automated scanners catch only about 30 to 40% of criteria. A manual keyboard pass and a screen-reader pass are required to close the rest.
• Every real fix is a change to your theme code (Liquid, CSS, JavaScript), not a widget layered on top.

Why you can trust us

Jacques has over 15 years of development experience and has helped many Shopify brands ship accessible, fast storefronts. We have been in the Shopify space for over four years and built Fudge, an AI store builder and editor with a 5.0 rating on the Shopify App Store. Fudge finds accessibility issues in your theme and fixes them in native code. The criteria numbers and levels below are taken directly from the official W3C WCAG 2.2 Recommendation, not from memory.

This checklist is the practical companion to our broader Shopify ADA and WCAG compliance guide. If you want the legal picture rather than the criteria, start there.

How to read this checklist

WCAG has three conformance levels: A (minimum), AA (the target), and AAA (the highest). To claim WCAG 2.2 AA, you must satisfy every Level A criterion and every Level AA criterion. AAA criteria are aspirational and are not part of the legal standard, so we flag them but do not require them.

The guidelines are grouped under four principles, known by the acronym POUR:

• Perceivable. Users can perceive the content through some sense.
• Operable. Users can operate every control.
• Understandable. Content and behavior are predictable.
• Robust. Assistive technology can interpret the markup.

Each section below lists the criteria most likely to break on a Shopify store, with the exact success-criterion number, its level, and where to fix it in your theme.

What is new in WCAG 2.2

WCAG 2.2 became a W3C Recommendation in October 2023 and is the current version.¹ It kept everything from 2.1 and added nine new success criteria, while removing one. Being precise about their levels matters, because only the A and AA additions affect your compliance target.²

Two points worth getting right. 2.4.13 Focus Appearance is Level AAA, not AA, so it is not required for AA conformance even though it concerns focus. And 4.1.1 Parsing was removed in WCAG 2.2: it is obsolete, because modern browsers handle the malformed markup it addressed, so you no longer test against it.²

The six new A and AA criteria are the ones to add to your existing 2.1 review. We call them out in their POUR sections below.

Perceivable

Everything a shopper needs to understand the page has to be available to sight, hearing, or assistive technology.

Text alternatives and media

• 1.1.1 Non-text Content (A). Every meaningful image needs a text alternative. In Shopify this is the alt field on product images, collection images, and any image added through a section or the theme editor. Decorative images should have an empty alt="" so screen readers skip them. Icon-only controls (cart, search, hamburger menu) need an accessible name too, which overlaps with the Operable criteria below.
• 1.2.2 Captions (Prerecorded) (A) and 1.2.5 Audio Description (Prerecorded) (AA). If you embed product videos or a lifestyle reel, provide captions, and provide audio description or a text alternative where visuals carry information not in the audio.

Color and contrast

• 1.4.1 Use of Color (A). Never rely on color alone to convey meaning. A sale price shown only in red, or a form error marked only by a red border, fails. Add text, an icon, or an underline.
• 1.4.3 Contrast (Minimum) (AA). Normal text needs a contrast ratio of at least 4.5:1 against its background; large text (roughly 24px, or 18.66px bold) needs 3:1. This is the single most common Shopify failure, and it almost always comes from brand colors used for body copy, button labels, or placeholder text. Fix it in the theme’s color settings or CSS.
• 1.4.11 Non-text Contrast (AA). Interface components and meaningful graphics need 3:1 contrast. Think of a light-gray input border, an outline-only “Add to cart” button, or a focus ring that is too faint to see.

Adapting the layout

• 1.4.4 Resize Text (AA). Text must stay readable when zoomed to 200% without loss of content. Avoid fixed pixel heights on containers that clip text.
• 1.4.10 Reflow (AA). Content must reflow into a single column at a viewport of 320 CSS pixels wide (equivalent to 400% zoom) with no horizontal scrolling. Sticky headers, wide tables, and multi-column sections are the usual offenders on a Shopify theme.
• 1.4.12 Text Spacing (AA) and 1.4.13 Content on Hover or Focus (AA). Content must survive increased line and letter spacing, and any hover or focus popover (a mega-menu, a size-guide tooltip) must be dismissible, hoverable, and persistent.
• 1.3.5 Identify Input Purpose (AA). Fields collecting known user data (name, email, address at checkout or in account forms) should use the correct autocomplete attribute so browsers and assistive tech can fill them.

Operable

Every menu, drawer, and button has to work by keyboard and by touch, not just by mouse.

Keyboard access

• 2.1.1 Keyboard (A) and 2.1.2 No Keyboard Trap (A). Everything operable by mouse must work with the keyboard, and focus must never get stuck. On Shopify, the usual failures are custom mega-menus, cart drawers, quick-view modals, and image galleries built with JavaScript that ignores the keyboard. A shopper using Tab and Enter must be able to open the cart drawer, move through it, and close it.
• 2.4.1 Bypass Blocks (A). Provide a skip link so keyboard users can jump past the header to the main content. Dawn and most Theme Store themes ship one; heavily customized themes sometimes lose it.

Focus visibility

• 2.4.7 Focus Visible (AA). The element with keyboard focus must have a visible indicator. A frequent theme mistake is a global outline: none in CSS that strips focus rings site-wide. Remove it or replace it with a visible custom style.
• 2.4.11 Focus Not Obscured (Minimum) (AA). New in 2.2. When an element receives focus, it must not be entirely hidden behind other content. Sticky headers, cookie banners, and floating chat buttons are the common culprits: they can cover the focused field as a keyboard user tabs down the page.

Pointer, touch, and target size

• 2.5.7 Dragging Movements (AA). New in 2.2. Any action that uses dragging must have a single-pointer alternative that is not a drag. If your theme uses a drag-based image slider or a “slide to confirm” control, add tap or click controls (arrows, buttons) as an alternative.
• 2.5.8 Target Size (Minimum) (AA). New in 2.2. Touch targets must be at least 24 by 24 CSS pixels, or have enough spacing around them. Cramped mobile menus, small quantity steppers, closely packed swatches, and tiny social icons in the footer are the typical Shopify failures.
• 2.5.3 Label in Name (A). A control’s accessible name must contain its visible label text, so voice-control users can activate “Add to cart” by saying it.

Understandable

Shoppers should be able to predict what a control does and recover cleanly from mistakes.

Language and predictability

• 3.1.1 Language of Page (A). Set the page lang attribute (for example <html lang="en">) so screen readers use the right pronunciation. 3.1.2 Language of Parts (AA) marks any passage in a different language, which matters for multi-locale stores.
• 3.2.3 Consistent Navigation (AA) and 3.2.4 Consistent Identification (AA). Keep the header, menu, and repeated icons in the same place and named the same way across pages. A cart icon labeled “Cart” on one template and “Bag” on another fails.
• 3.2.6 Consistent Help (A). New in 2.2. If you offer help (a contact link, chat, or support page), keep it in a consistent location across pages so it is easy to find.

Forms, labels, and errors

• 3.3.2 Labels or Instructions (A). Every input needs a programmatic <label>. Placeholder text is not a label. This hits the newsletter signup, contact form, search field, and variant/quantity selectors on most themes. A label hidden visually but present for screen readers is fine.
• 3.3.1 Error Identification (A) and 3.3.3 Error Suggestion (AA). When a form entry fails validation, identify the field in text and suggest a fix. Do not signal the error with color alone.
• 3.3.7 Redundant Entry (A). New in 2.2. Do not force a shopper to re-enter information they already gave in the same process. A “billing same as shipping” option satisfies this in checkout flows you control.
• 3.3.8 Accessible Authentication (Minimum) (AA). New in 2.2. Do not require a cognitive test (like solving a puzzle or retyping a code from an image) as the only way to log in. If your account area or a third-party gate adds a CAPTCHA, provide an accessible alternative such as email magic links or standard password managers.

Robust

The markup has to be clean enough for assistive technology to read reliably.

• 4.1.2 Name, Role, Value (A). Custom interactive components need the correct name, role, and state. A <div> styled as a button needs role="button", keyboard handling, and an accessible name; an accordion needs aria-expanded. Where possible, use native elements (<button>, <a>, <select>) instead of rebuilding them.
• 4.1.3 Status Messages (AA). Updates that appear without moving focus, such as “Added to cart” or “Only 2 left,” should be announced with an ARIA live region so screen-reader users hear them.
• Note that 4.1.1 Parsing is gone in WCAG 2.2, so duplicate id attributes and minor markup nesting issues no longer count as a failure of this criterion (though they can still break other criteria).

The scannable checklist

Use this as a quick pass. Each row is a criterion, its level, and the Shopify surface where it usually breaks. The rows marked New in 2.2 are the ones to add to an existing WCAG 2.1 review.

Automated tools only get you part way

A scanner is a good first pass, and it is the fastest way to catch contrast, missing alt text, and missing labels. But automated tooling only detects roughly 30 to 40% of WCAG success criteria. A machine cannot judge whether alt text is meaningful, whether the keyboard order makes sense, or whether a screen reader can actually complete a checkout.

So a real audit has two layers:

1. Automated scan. Run a free tool such as axe DevTools, WAVE, or Lighthouse against your key templates (home, collection, product, cart, and a content page).
2. Manual passes. Navigate the full path from product page to completed checkout using only the keyboard (Tab, Shift+Tab, Enter). Then repeat it with a screen reader (VoiceOver on Mac, the free NVDA on Windows). Finally, zoom to 200% and reflow to 320px to confirm nothing clips or overlaps.

For a walkthrough of the errors that show up most often and how to remove them, see our guide to fixing common Shopify accessibility failures.

Fixing what you find, the right way

Every durable fix on this checklist is a change to your theme code. That is also the part that overlays skip. A widget layered on top of the page cannot rewrite your alt text, add a <label> to the search field, enlarge a tap target, or make a cart drawer keyboard operable. It sits on top of the same broken HTML, which is why sites running one still get sued and the FTC penalized a major overlay vendor for claiming otherwise. We cover the full case in our guide on why accessibility overlays fail, and the platform-level question in is Shopify ADA compliant?

Most of the fixes are concrete Liquid, CSS, and JavaScript edits:

• Add descriptive alt text and empty alt="" on decorative images.
• Give every icon-only button and link an accessible name.
• Associate every input with a <label>.
• Raise text and component contrast to 4.5:1 and 3:1.
• Restore visible focus states and a logical tab order.
• Enlarge touch targets to at least 24px and add non-drag alternatives.
• Set the correct lang attribute per locale.

This is where an AI store builder helps. Fudge reads your live theme, surfaces the failing criteria in your code, fixes them directly in native Liquid, CSS, and JavaScript, and keeps the changes in your theme. Because the output is real code rather than an injected layer, it holds up the way a developer’s fix would, with no extra script slowing the page. It pairs naturally with related work like adding structured data and general store editing.

The model we recommend, and the one we built Fudge around, is three steps: surface what needs fixing, fix it at the source, and monitor so a future content edit does not quietly reintroduce a failure. If you sell into the EU as well, the same 2.2 AA work covers the European Accessibility Act, which references the older WCAG 2.1 AA.

FAQ

Related posts

The State of Shopify Performance in 2026

20 Jul 2026

Fix the 6 Most Common Accessibility Failures in Your Shopify Theme

18 Jul 2026

The Complete Guide to Shopify Checkout Extensibility

16 Jul 2026