WCAG 2.2 Success Criteria: Shopify Implementation Reference (2026)

This is the Shopify-specific reference for WCAG 2.2 AA success criteria. WCAG 2.2 has 50 criteria at Level AA (combining 2.0 and 2.1 plus 2.2's six new AA additions); this article walks through each in Shopify-implementation context — what the criterion requires, how to test it on a Shopify storefront, the most-common Shopify failure pattern, and the typical remediation approach. The reference is structured for direct lookup; merchants and developers can navigate to specific criteria when remediation questions arise.

Principle 1: Perceivable

1.1.1 Non-text Content (Level A)

Requirement: All non-text content (images, icons, audio, video) has a text alternative serving equivalent purpose. Shopify test: Inspect product images, hero images, decorative images, social-media icons; verify alt attribute presence and descriptive content. Decorative images can use `alt=""`. Common Shopify failure: product images with empty alt; decorative images with descriptive alt; alt="image" placeholder. Remediation: descriptive alt text per image content; alt-text generation via product-imagery review; theme-level enforcement of alt requirement.

1.2.1 Audio-only and Video-only (Level A)

Requirement: Pre-recorded audio-only content has text transcript; pre-recorded video-only content has text or audio description. Shopify test: identify any audio or silent-video content on storefront. Common Shopify failure: product video without transcript or alternative; brand-story video silent without text alternative. Remediation: provide transcript file linked from video; provide text description in product-page content.

1.2.2 Captions (Pre-recorded) (Level A)

Requirement: Pre-recorded video with audio has synchronized captions. Shopify test: any video with audio on the storefront; check for caption track. Common failure: product demo videos without captions; brand video without captions. Remediation: caption file (.vtt) linked to video; YouTube auto-captions reviewed for accuracy.

1.2.3 Audio Description or Media Alternative (Pre-recorded) (Level A)

Requirement: Pre-recorded video has audio description or full text alternative. Shopify test: video content showing visual information not in audio. Common failure: product demo where visual demonstration isn't described in audio. Remediation: audio description track or detailed text description linked from video.

1.2.4 Captions (Live) (Level AA)

Requirement: Live audio in synchronized media has captions. Shopify test: rare for ecommerce; live shopping or live customer service applications. Common failure: live shopping events without captions. Remediation: integrate live captioning service for live audio events.

1.2.5 Audio Description (Pre-recorded) (Level AA)

Requirement: Pre-recorded video has audio description. Shopify test: same content as 1.2.3 with stricter standard. Common failure: product demos without audio description track. Remediation: audio description track integrated into media.

1.3.1 Info and Relationships (Level A)

Requirement: Information, structure, and relationships in content can be programmatically determined. Shopify test: form-label associations (`for`/`id`), heading hierarchy (one H1 per page, sequential H2/H3), table semantics (`<table>` for data, `<div>` for layout), list semantics (`<ul>`/`<ol>` not `<div>`). Common Shopify failure: review apps inject duplicate H1; form labels via placeholder rather than `<label>`; layout tables for grid presentation. Remediation: theme.liquid corrections to heading levels; explicit `<label>` elements with `for`/`id` association; CSS grid replacing layout tables.

1.3.2 Meaningful Sequence (Level A)

Requirement: Reading order in CSS-positioned content matches source DOM order. Shopify test: tab through page, verify focus moves in logical visual order. Common failure: floating elements that disrupt source-DOM reading order. Remediation: source-DOM order matches visual order; CSS Grid/Flexbox preserve reading order.

1.3.3 Sensory Characteristics (Level A)

Requirement: Instructions don't rely solely on sensory characteristics (shape, size, position, color, sound). Shopify test: instructions like "click the green button" or "the icon to the right." Common failure: "click the cart icon in the top right" without programmatic identification. Remediation: instructions use accessible names, not just visual position or color.

1.3.4 Orientation (Level AA)

Requirement: Content not restricted to single orientation (portrait or landscape). Shopify test: rotate device; verify storefront works in both orientations. Common failure: mobile checkout breaking in landscape. Remediation: responsive CSS supporting both orientations.

1.3.5 Identify Input Purpose (Level AA)

Requirement: Input fields have `autocomplete` attribute identifying purpose. Shopify test: inspect form fields; check for `autocomplete="email"`, `autocomplete="given-name"`, etc. Common failure: checkout fields without autocomplete; custom forms without autocomplete attributes. Remediation: autocomplete attribute on every input field per HTML5 specification.

1.4.1 Use of Color (Level A)

Requirement: Color isn't the sole means of conveying information. Shopify test: error messages, required-field indicators, status badges using only color. Common failure: red-colored "error" text without icon or text indicator; required-field marked only with red asterisk. Remediation: combine color with text or icon indication.

1.4.2 Audio Control (Level A)

Requirement: Audio that plays automatically for more than 3 seconds has pause/stop control. Shopify test: any auto-playing audio. Common failure: video with audio auto-plays without pause control. Remediation: prevent auto-play with audio; if essential, provide visible pause control.

1.4.3 Contrast (Minimum) (Level AA)

Requirement: Text contrast ratio ≥ 4.5:1; large text (18pt or 14pt bold) ≥ 3:1. Shopify test: contrast-checker tools (axe DevTools, WAVE, Stark) on text/background combinations. Common failure: light gray text on white; brand colors not validated against WCAG; placeholder text below contrast threshold. Remediation: theme color tokens validated for 4.5:1 minimum; brand-color overrides where insufficient.

1.4.4 Resize Text (Level AA)

Requirement: Text can be resized to 200% without loss of content or functionality. Shopify test: browser zoom to 200%; verify functionality and content visibility. Common failure: fixed-width text containers, viewport-based font sizes that don't scale. Remediation: relative font units (rem, em); responsive layouts that accommodate text scaling.

1.4.5 Images of Text (Level AA)

Requirement: Images of text are avoided except for logos and similar. Shopify test: inspect imagery; identify text rendered as image rather than text. Common failure: marketing banners with text-as-image; product callouts as image. Remediation: text rendered as text with CSS styling; reserved for true logo and brand-asset use.

1.4.10 Reflow (Level AA)

Requirement: Content reflows to single column at 320px viewport width without loss. Shopify test: resize browser to 320px width; verify single-column reflow. Common failure: horizontal scrolling at 320px; content cut off. Remediation: responsive CSS with single-column behavior at narrow viewports.

1.4.11 Non-text Contrast (Level AA)

Requirement: Non-text elements (form-field borders, focus indicators, icons) have 3:1 contrast against background. Shopify test: check form-field borders, focus indicators, icon contrast. Common failure: low-contrast input borders; faint focus indicators; near-invisible icon contrast. Remediation: theme CSS adjustments for non-text contrast.

1.4.12 Text Spacing (Level AA)

Requirement: User-controlled text spacing doesn't break content. Shopify test: inject CSS with line-height 1.5x, paragraph-spacing 2x, letter-spacing 0.12em, word-spacing 0.16em; verify content remains readable. Common failure: fixed-pixel layouts breaking with adjusted spacing. Remediation: relative-unit spacing; layouts that accommodate spacing changes.

1.4.13 Content on Hover or Focus (Level AA)

Requirement: Content appearing on hover/focus is dismissible, hoverable, and persistent. Shopify test: hover over tooltips; verify dismissible (via Esc or pointer movement), hoverable (cursor can move to tooltip without dismissal), persistent (visible until user dismisses). Common failure: tooltips that disappear on cursor movement; tooltips without dismiss. Remediation: tooltip-pattern code with proper keyboard and pointer handling.

Principle 2: Operable

2.1.1 Keyboard (Level A)

Requirement: All functionality operable via keyboard. Shopify test: tab through every interactive element; verify activation via Enter/Space. Common Shopify failure: custom carousels, custom dropdowns, modal popups lacking keyboard handlers. Remediation: theme-JavaScript keyboard handlers per element type.

2.1.2 No Keyboard Trap (Level A)

Requirement: Keyboard focus enters and exits all components. Shopify test: tab into every modal, popup, complex component; verify Esc/escape pattern works. Common failure: modal popups without Esc handler; focus captured indefinitely. Remediation: focus-trap library with proper escape handling; Esc key explicitly handled.

2.1.4 Character Key Shortcuts (Level A)

Requirement: Single-character shortcuts can be turned off, remapped, or activated only with modifier. Shopify test: check for "/" search shortcut, single-letter navigation. Common failure: search-app shortcuts that conflict with assistive technology. Remediation: shortcut configuration option in app settings.

2.2.1 Timing Adjustable (Level A)

Requirement: Time limits can be turned off, adjusted, or extended. Shopify test: any auto-dismissing modal, session timeout, carousel auto-advance. Common failure: pop-up auto-dismisses without user control. Remediation: pause/extend controls; user-preference for timing.

2.2.2 Pause, Stop, Hide (Level A)

Requirement: Auto-moving, blinking, or auto-updating content has pause/stop/hide control. Shopify test: hero carousels, animated banners, auto-updating product feeds. Common failure: hero carousel with no pause control. Remediation: pause control on auto-advancing content; respect prefers-reduced-motion.

2.3.1 Three Flashes or Below Threshold (Level A)

Requirement: Content doesn't flash more than 3 times per second. Shopify test: animations, transitions, video content. Common failure: rare for ecommerce; animated promotional content. Remediation: avoid flashing animations; respect prefers-reduced-motion.

2.4.1 Bypass Blocks (Level A)

Requirement: Mechanism to bypass repeated content blocks (skip-to-main-content link). Shopify test: tab from page top; verify skip-to-main-content link appears. Common failure: theme without skip link; skip link present but non-functional. Remediation: theme.liquid skip-link injection with proper target.

2.4.2 Page Titled (Level A)

Requirement: Pages have descriptive titles. Shopify test: every page has unique, descriptive `<title>`. Common failure: every page using same generic title. Remediation: theme.liquid title-block configured per page type.

2.4.3 Focus Order (Level A)

Requirement: Focus order preserves meaning and operability. Shopify test: tab through page; verify logical order matches visual layout. Common failure: dynamically-rendered content disrupts focus order. Remediation: tabindex management; focus restoration after dynamic updates.

2.4.4 Link Purpose (In Context) (Level A)

Requirement: Link purpose can be determined from link text alone or with context. Shopify test: review link text; "click here" links insufficient. Common failure: "Learn more" or "Click here" without context. Remediation: descriptive link text; aria-label for unavoidable contextual links.

2.4.5 Multiple Ways (Level AA)

Requirement: Multiple ways to locate a page (search, navigation, sitemap). Shopify test: navigation menu, search functionality, sitemap presence. Common failure: search functionality broken or missing. Remediation: ensure navigation menu, search, and breadcrumbs operational.

2.4.6 Headings and Labels (Level AA)

Requirement: Headings and labels describe topic or purpose. Shopify test: review headings throughout site for descriptiveness; review form labels for clarity. Common failure: generic headings ("Section"); ambiguous form labels. Remediation: descriptive headings; clear, specific form labels.

2.4.7 Focus Visible (Level AA)

Requirement: Focus indicator is visible. Shopify test: tab through page; verify focus indicator on every focusable element. Common Shopify failure: theme uses `outline: none` to remove focus styles. Remediation: theme CSS focus-visible style for all interactive elements.

2.4.11 Focus Not Obscured (Minimum) (Level AA, NEW in WCAG 2.2)

Requirement: Focus indicator not entirely hidden by author-created content. Shopify test: tab through page with sticky header/footer; verify focused element visible. Common failure: sticky header obscures focused element below. Remediation: scroll-margin or scroll-into-view JavaScript accounting for sticky elements.

2.5.1 Pointer Gestures (Level A)

Requirement: Multi-pointer or path-based gestures have single-pointer alternative. Shopify test: identify pinch-to-zoom, multi-finger gestures. Common failure: image carousel with swipe-only navigation. Remediation: button alternatives for gesture-only interactions.

2.5.2 Pointer Cancellation (Level A)

Requirement: Function activates on up-event, not down-event (allowing cancellation). Shopify test: click-and-drag-away from buttons; verify no activation. Common failure: rare; most modern Shopify themes handle correctly. Remediation: ensure event listeners on `mouseup`/`click`, not `mousedown`.

2.5.3 Label in Name (Level A)

Requirement: Visible text label is in the accessible name. Shopify test: voice-control test (e.g., "Click Submit"). Common failure: button shows "Submit" but accessible name is "btn-1". Remediation: aria-label matches visible text.

2.5.4 Motion Actuation (Level A)

Requirement: Motion-triggered functions have alternative and can be disabled. Shopify test: shake-to-undo, tilt-to-scroll patterns. Common failure: rare for ecommerce; mostly mobile-app patterns. Remediation: alternative interaction; disable option.

2.5.7 Dragging Movements (Level AA, NEW in WCAG 2.2)

Requirement: Dragging has single-pointer alternative. Shopify test: image carousel, product configurators with drag-only. Common failure: swipe-only carousel without prev/next buttons. Remediation: explicit prev/next buttons; tap-to-zoom; keyboard activation.

2.5.8 Target Size (Minimum) (Level AA, NEW in WCAG 2.2)

Requirement: Pointer-input targets ≥ 24×24 CSS pixels (or equivalent spacing). Shopify test: measure target sizes via browser DevTools. Common failure: small social-media icons (16×16), close-X buttons (20×20). Remediation: minimum sizing or equivalent spacing.

Principle 3: Understandable

3.1.1 Language of Page (Level A)

Requirement: Default language identified via `<html lang="...">`. Shopify test: inspect `<html>` element; verify lang attribute. Common failure: missing lang attribute. Remediation: theme.liquid html element with lang="{{ shop.locale }}".

3.1.2 Language of Parts (Level AA)

Requirement: Language changes within content identified. Shopify test: foreign-language quotes, brand names from other languages. Common failure: untagged language switches. Remediation: `<span lang="...">` around language changes.

3.2.1 On Focus (Level A)

Requirement: Focus doesn't trigger context change (page navigation, form submission). Shopify test: tab through interactive elements; verify no unexpected page changes. Common failure: rare; mostly handled correctly. Remediation: ensure activation requires user gesture.

3.2.2 On Input (Level A)

Requirement: Input doesn't trigger unexpected context change. Shopify test: form-field interaction; verify no auto-submit. Common failure: dropdown selection auto-submits. Remediation: explicit submit button required.

3.2.3 Consistent Navigation (Level AA)

Requirement: Navigation consistent across pages. Shopify test: review navigation across page templates. Common failure: navigation moves between pages. Remediation: consistent placement and order via theme.

3.2.4 Consistent Identification (Level AA)

Requirement: Components with same functionality identified consistently. Shopify test: cart icons, add-to-cart buttons across product pages. Common failure: same function with different labels. Remediation: standardized component names across theme.

3.2.6 Consistent Help (Level A, NEW in WCAG 2.2)

Requirement: Help mechanisms in same relative order across pages. Shopify test: chat widget position, help link location across pages. Common failure: chat appears bottom-right on storefront, bottom-left on cart. Remediation: standardize chat-widget position via theme CSS.

3.3.1 Error Identification (Level A)

Requirement: Errors automatically detected are described in text. Shopify test: submit form with errors; verify text-based identification. Common failure: error indicated only by red border. Remediation: text error messages associated with field.

3.3.2 Labels or Instructions (Level A)

Requirement: Labels or instructions provided for input. Shopify test: form fields have visible labels. Common failure: placeholder-only labels. Remediation: explicit `<label>` elements.

3.3.3 Error Suggestion (Level AA)

Requirement: Error correction suggestions provided when known. Shopify test: invalid email format; verify suggestion. Common failure: "Invalid input" without specific guidance. Remediation: specific suggestions per error type.

3.3.4 Error Prevention (Legal, Financial, Data) (Level AA)

Requirement: For legal/financial/data-modifying actions, mechanism for confirmation, review, or reversibility. Shopify test: checkout submission, account deletion. Common failure: account deletion without confirmation. Remediation: confirmation step on consequential actions.

3.3.7 Redundant Entry (Level A, NEW in WCAG 2.2)

Requirement: Previously entered information auto-populated or selectable. Shopify test: shipping/billing address re-entry. Common failure: forced re-entry. Remediation: "same as shipping" checkbox; auto-population.

3.3.8 Accessible Authentication (Minimum) (Level AA, NEW in WCAG 2.2)

Requirement: Authentication doesn't require cognitive function test unless alternative exists. Shopify test: login flow; verify copy-paste enabled, alternative authentication available. Common failure: CAPTCHA-only without alternative. Remediation: email magic-link as alternative; copy-paste enabled.

Principle 4: Robust

4.1.2 Name, Role, Value (Level A)

Requirement: Components have programmatically determinable name, role, and value. Shopify test: custom buttons, custom dropdowns, variant selectors; verify role and accessible name. Common Shopify failure: `<div>` styled as button; custom dropdown without role. Remediation: native HTML elements where possible; ARIA roles and labels where custom necessary.

4.1.3 Status Messages (Level AA)

Requirement: Status messages programmatically announced without focus change. Shopify test: add-to-cart confirmation, search-results loading, validation errors. Common Shopify failure: cart updates not announced. Remediation: `role="status"` or `aria-live="polite"` on status containers.

What Does TestParty's Approach Look Like?

TestParty's source-code remediation addresses every WCAG 2.2 AA criterion in the Shopify-implementation context. Approach: source-code remediation against WCAG 2.2 AA mapped to EN 301 549, daily automated scans across all 50 AA criteria, monthly expert manual audits covering criteria automation can miss (cognitive accessibility, complex business-logic flows, dynamic-content edge cases), date-stamped compliance reports legal counsel can use, ongoing monitoring infrastructure. Compliance scope spans ADA Title III, WCAG 2.2 AA, EAA Directive 2019/882, BFSG, BITV 2.0 alignment, CIPA, and GDPR. TestParty was named to the Forbes Accessibility 100 in 2025 and has remediated 1,575,000+ WCAG issues across 100+ brands.

For broader Shopify-implementation context, see shopify accessibility audit checklist WCAG 2.2 Liquid and the 2026 Shopify accessibility reference.

Frequently Asked Questions

Why does this reference cover only AA criteria, not AAA? AA is the practical conformance bar referenced by EAA, EN 301 549, Section 508, and most accessibility settlements. AAA is aspirational and rarely required by regulation. Shopify merchants targeting AAA conformance typically do so for specific federal-procurement or contractual reasons; the AAA criteria are a separate scope outside this reference.

How often is the reference updated? Quarterly to reflect WCAG version updates, EAA implementation maturity, and Shopify-platform-specific pattern changes. WCAG 2.2 is the current standard as of April 2026; future WCAG 3.0 will require updated reference once published.

What if our Shopify storefront has criterion failures we don't see in this reference? The reference covers common Shopify-implementation patterns; storefronts with heavy customization, app-injection, or headless architecture may have failure patterns specific to their context. The substantive criterion requirements remain the same; the implementation-specific patterns adapt.

Is the reference applicable to non-Shopify ecommerce? The substantive WCAG criteria are platform-independent. The Shopify-specific patterns (Liquid templates, Theme Store, App Store) translate to platform-specific equivalents on BigCommerce, WooCommerce, Magento, custom platforms. Most patterns transfer with minor naming adjustments.

How do automated scans cover these criteria? Automated tooling covers approximately 40-60% of criteria — the criteria fitting pattern-matching. Remaining 40-60% require manual evaluation. Hybrid approaches (automated daily + manual monthly) cover the full criterion set; pure-automated approaches have systematic gaps.

What's the typical Shopify storefront's per-criterion violation density? Standard Shopify with stock theme: 80-150 total violations across all criteria. WCAG 4.1.2 (Name, Role, Value) and WCAG 1.3.1 (Info and Relationships) typically have the largest violation counts; WCAG 2.5.8 (Target Size) is the largest WCAG 2.2-specific violation source. Plus and customized themes scale up proportionally.

Are there Shopify-specific criterion-mapping templates available? Yes — TestParty's customer engagement includes per-criterion mapping with specific Shopify-Liquid examples. The 50-criterion checklist with Shopify-specific test patterns is part of standard onboarding documentation.

How does this reference relate to the audit deliverable? Audit deliverables typically apply this reference to a specific storefront — listing each criterion's status, evidence, and remediation. The reference is the framework; the audit is the application of the framework to a specific site.

TestParty practices a cyborg approach to content: AI assists with research and drafting, our accessibility experts validate every claim. This article represents our editorial perspective based on public data as of the publication date. We compete in the digital accessibility space — which means we have informed opinions, but also a vested interest. All sources are cited so you can draw your own conclusions.