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, the most relevant changes are at Level AA — the legally referenced standard. Here's what's new and what it means for your store.
New Level AA Criteria
2.4.11 Focus Appearance (AA) — NEW
What it requires: The keyboard focus indicator must have a minimum visible area. Specifically:
- At least a 2 CSS pixel perimeter around the focused component
- Contrast ratio of at least 3:1 between the focused and unfocused states
- At least 3:1 contrast ratio against adjacent colors
What this means for Shopify: WCAG 2.1 required focus to be visible (2.4.7) but didn't specify how visible. WCAG 2.2's 2.4.11 is significantly more specific.
Many Shopify themes use the browser's default focus outline (often a 1px blue ring), which frequently fails the new minimum requirements. Stores that removed focus outlines entirely with outline: none obviously fail.
How to fix: Implement a robust :focus-visible style:
:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
border-radius: 2px;
}
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 (Minimum) (AA) — NEW
What it requires: When a UI component receives keyboard focus, the component must not be entirely hidden by author-created content.
What this means for Shopify: Sticky headers are a common culprit. If your store has a sticky navigation bar at the top of the screen, tabbing through the page should not cause focused elements to be completely hidden behind the sticky header.
Fixed-position cookie consent banners, chat widgets, and promotional bars can also obscure focused elements.
How to fix: Use scroll-margin-top to account for sticky headers:
:focus-visible {
scroll-margin-top: 80px; /* Match your sticky header height */
}
New Level AA Criteria Relevant to Checkout
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 users to solve cognitive function tests (CAPTCHAs that require identifying objects), unless an alternative is provided.
What this means for Shopify: Standard Shopify login is fine. The risk area is third-party integrations: CAPTCHA implementations for bot protection that require cognitive tasks without an alternative (like email-based verification).
If you have a CAPTCHA on your store's contact form, account registration, or checkout, check that an alternative method (audio CAPTCHA, email token, or similar) is provided.
New Level A Criteria
2.5.7 Dragging Movements (A) — 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: The size of a touch target must be at least 24×24 CSS pixels, with at least 24px spacing between targets of the same size.
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 you were tracking 4.1.1 violations (duplicate IDs, unclosed tags, etc.), you no longer need to track them as accessibility violations — though valid HTML is still a best practice.
WCAG 2.1 vs 2.2: The Legal Landscape
As of early 2026:
- ADA (DOJ guidance): References WCAG 2.1 AA
- EAA (European Accessibility Act): References EN 301 549, which maps to WCAG 2.1 AA
- Section 508 (US federal procurement): WCAG 2.0 AA (updating to 2.1/2.2 is underway)
Legal standards haven't yet universally adopted WCAG 2.2, but WCAG 2.2 is backward compatible — meeting it means you meet 2.1. Adopting WCAG 2.2 criteria proactively positions you ahead of the legal standard curve.
Your WCAG 2.2 Action Plan for Shopify
Priority fixes for the new criteria:
- Audit focus indicators — many fail 2.4.11; this is a quick CSS fix
- Check for sticky header obscuring — 2.4.12; common in Shopify themes
- Audit touch target sizes — 2.5.8; small buttons are extremely common
- Review CAPTCHA implementation — 3.3.8; if you have CAPTCHA, add alternatives
- Check for drag-only interfaces — 2.5.7; usually only relevant for custom apps
AccessComply's scanner tests against WCAG 2.2 criteria including the new success criteria. The auto-fix agents cover focus indicators and touch target sizing.
Scan your store against WCAG 2.2 — free, and see exactly which of the new criteria your store fails.
Further Reading
Ready to Fix Your Store?
Scan your Shopify store for free. Automatically fix 70–80% of WCAG 2.1 AA violations with real source-code changes — no overlay widgets.