WCAG 2.2 for Shopify Merchants: What's New and What You Need to Fix
What Changed in WCAG 2.2
WCAG 2.2 was published as a W3C Recommendation on October 5, 2023. It adds 9 new success criteria across Levels A, AA, and AAA, and removes one criterion from WCAG 2.1.
For Shopify merchants, several Level A and AA additions affect common storefront patterns. The applicable legal or contractual target depends on the jurisdiction and program, so treat WCAG as a technical standard rather than an automatic legal safe harbor.
New Focus Criteria
2.4.11 Focus Not Obscured (Minimum) (AA) — NEW
What it requires: When a user interface component receives keyboard focus, author-created content must not entirely hide that component.
What this means for Shopify: Sticky headers, cookie banners, chat widgets, drawers, and promotional bars can cover the element a keyboard user has reached.
How to fix: Test the complete keyboard path at multiple viewport sizes. Depending on the component, scroll-padding or scroll-margin may help account for sticky UI, but it does not replace interaction testing:
html {
scroll-padding-top: 80px; /* Match the persistent header */
}
2.5.3 Label in Name (AA) — Was in 2.1, still relevant
Reminder: this was added in WCAG 2.1 but often missed. If a button has visible text "Add to Cart," its accessible name must contain "Add to Cart." You can add context (e.g., "Add to Cart — Blue T-Shirt") but you can't replace the visible text with something different.
2.4.12 Focus Not Obscured (Enhanced) (AAA) — NEW
What it requires: No part of the focused component may be hidden by author-created content. This is stricter than 2.4.11 and is a Level AAA criterion.
2.4.13 Focus Appearance (AAA) — NEW
What it requires: A keyboard focus indicator must meet minimum area and contrast requirements. This is a Level AAA criterion; Level AA still includes 2.4.7 Focus Visible and 2.4.11 Focus Not Obscured (Minimum).
What this means for Shopify: Themes that remove focus outlines or use a faint indicator create a barrier even when the focused component is not obscured. A robust starting point is:
:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}
New Criteria Relevant to Checkout and Sign-in
3.3.7 Redundant Entry (A) — NEW
What it requires: Information that users have already entered in the current process must not be requested again, unless re-entering is essential, for security, or data may have changed.
What this means for Shopify: Shopify's native checkout handles this well — billing address auto-fills from shipping address. But custom checkout extensions or third-party app flows that ask users to re-enter information they already provided can violate this criterion.
Watch for: multi-step quote flows, custom order forms, customer account registration that re-asks for email when you're already logged in.
3.3.8 Accessible Authentication (Minimum) (AA) — NEW
What it requires: Authentication processes must not require a cognitive function test unless an allowed exception applies or another authentication method that does not rely on that test is available. Mechanisms that support password managers and copy-and-paste are important parts of the criterion.
What this means for Shopify: Review every account and third-party sign-in path. CAPTCHA, one-time-code, and bot-protection implementations need to be evaluated as complete processes, including their alternatives.
If a flow presents a cognitive test, provide a path that does not depend on that test and verify that password managers and pasting are not blocked.
Additional New Criteria
2.5.7 Dragging Movements (AA) — NEW
What it requires: All functionality that uses a dragging movement must also be achievable through a single pointer (click/tap) without dragging.
What this means for Shopify: Drag-and-drop interfaces in Shopify apps (product image sorting, collection builders, etc.) need click-based alternatives. Most native Shopify admin features handle this well, but custom storefront features with drag-and-drop interfaces need attention.
2.5.8 Target Size (Minimum) (AA) — NEW
What it requires: Pointer targets generally need to be at least 24×24 CSS pixels, or have enough spacing that the criterion's 24px test circles do not overlap nearby targets. WCAG lists exceptions, so evaluate the rendered target in context.
What this means for Shopify: Small touch targets are everywhere on Shopify storefronts:
- Quantity increment/decrement buttons
- Social media share icons
- Pagination dots
- Close buttons on modals/drawers
Many themes use icons as small as 14×14px or 16×16px. These need to be at least 24×24px at the touch-clickable level (padding counts, not just the icon itself).
How to fix: Ensure all interactive elements have sufficient padding to achieve 24×24 touch target size:
button.qty-btn {
min-width: 24px;
min-height: 24px;
/* If the icon is 14px, add padding to reach 24px total */
padding: 5px;
}
3.2.6 Consistent Help (A) — NEW
What it requires: If a mechanism for requesting human assistance (contact info, help button, live chat) is present on multiple pages, it should appear in the same relative location across those pages.
What this means for Shopify: If your store has a chat widget or "Contact us" footer link, it should appear in the same position on every page. This is usually handled automatically by consistent footer/header components.
What Was Removed: 4.1.1 Parsing
WCAG 2.2 removed 4.1.1 Parsing (formerly AA), which required valid HTML markup. The W3C determined that modern browsers handle invalid HTML robustly enough that this criterion no longer differentiates accessible from inaccessible experiences.
If a policy, contract, or reporting template still targets WCAG 2.0 or 2.1, confirm whether it expects separate 4.1.1 testing. Valid HTML and unique identifiers also remain important engineering practices even when 4.1.1 is outside the selected conformance target.
WCAG 2.1 vs 2.2: Policy Context
WCAG versions referenced by laws, regulations, procurement rules, and contracts vary. The U.S. Department of Justice explains that the ADA applies to web content but does not name a single technical standard that every business must use. W3C recommends WCAG 2.2 as the current conformance target and states that content conforming to WCAG 2.2 also conforms to 2.1, while noting that a policy may still require separate testing or reporting for the removed 4.1.1 Parsing criterion.
Confirm the exact obligation that applies to your business with qualified counsel or the relevant contracting authority. AccessComply provides testing, remediation workflow, and evidence; it does not provide legal advice or certify legal compliance.
Your WCAG 2.2 Action Plan for Shopify
Priority fixes for the new criteria:
- Audit focus visibility and appearance — test 2.4.7 and, when targeting AAA, 2.4.13; do not assume one CSS rule works for every component
- Check for sticky UI obscuring focus — 2.4.11 at Level AA; test headers, drawers, banners, and widgets
- Audit touch target sizes — 2.5.8; small buttons are extremely common
- Review authentication and CAPTCHA paths — 3.3.8; verify a permitted alternative path and support password managers and paste
- Check for drag-only interfaces — 2.5.7; usually only relevant for custom apps
AccessComply checks applicable automated patterns mapped to selected WCAG 2.2 criteria. Eligible focus-indicator and target-size findings may have merchant-reviewable deterministic candidates; the scanner does not evaluate every criterion or guarantee that a candidate is appropriate for every theme.
Scan your store against supported WCAG 2.2 patterns — free, and see which automated findings need remediation or manual review.
Further Reading
Find the storefront issues holding back growth
Scan SEO, speed, and accessibility by page. Review supported fixes before they run, keep saved originals, and verify the live result afterward.