WCAG 2.2 for eCommerce: What Online Retailers Must Know

WCAG 2.2, released in October 2023, introduces nine new success criteria that directly impact how eCommerce sites must handle authentication, navigation, and user input. For online retailers already navigating accessibility requirements, understanding these updates is essential for maintaining compliance and avoiding the surge in accessibility lawsuits targeting digital storefronts.

The Web Content Accessibility Guidelines (WCAG) serve as the technical standard courts reference when evaluating website accessibility. While WCAG 2.1 Level AA remains the most commonly cited benchmark, WCAG 2.2 represents current best practices and will increasingly factor into compliance expectations. This guide breaks down what's new and what it means for your online store.

What Changed in WCAG 2.2

WCAG 2.2 builds on version 2.1, adding nine new success criteria while removing one (4.1.1 Parsing). The new criteria focus on improving accessibility for users with cognitive disabilities, low vision, and motor impairments—populations that frequently encounter barriers on eCommerce sites.

The Nine New Success Criteria

| Criterion                                  | Level | Primary Impact                |
|--------------------------------------------|-------|-------------------------------|
| 2.4.11 Focus Not Obscured (Minimum)        | AA    | Navigation, modals            |
| 2.4.12 Focus Not Obscured (Enhanced)       | AAA   | Navigation, sticky elements   |
| 2.4.13 Focus Appearance                    | AAA   | Visual design, CSS            |
| 2.5.7 Dragging Movements                   | AA    | Sliders, drag-and-drop        |
| 2.5.8 Target Size (Minimum)                | AA    | Buttons, links, touch targets |
| 3.2.6 Consistent Help                      | A     | Customer support access       |
| 3.3.7 Redundant Entry                      | A     | Forms, checkout               |
| 3.3.8 Accessible Authentication (Minimum)  | AA    | Login, account creation       |
| 3.3.9 Accessible Authentication (Enhanced) | AAA   | Login, security               |

For eCommerce sites pursuing Level AA compliance—the standard most courts apply—six of these criteria apply directly: Focus Not Obscured (Minimum), Dragging Movements, Target Size (Minimum), Consistent Help, Redundant Entry, and Accessible Authentication (Minimum).

WCAG 2.2 Requirements That Impact eCommerce

Let's examine each relevant criterion and what it means for online retail operations.

Focus Not Obscured (2.4.11) — Level AA

The requirement: When a user interface component receives keyboard focus, the component must not be entirely hidden by author-created content.

Why it matters for eCommerce: Sticky headers, promotional banners, cookie consent notices, and chat widgets commonly obscure focused elements. When a keyboard user tabs to a navigation link or form field, overlapping content can completely hide what they're trying to interact with.

Common violations:

• Sticky navigation bars that cover focused elements when scrolling
• Cookie consent banners blocking footer links
• Chat widgets overlapping form fields
• Promotional popups hiding add-to-cart buttons

How to fix:

• Ensure sticky elements account for focus position
• Use scroll-padding CSS to offset focus positions
• Dismiss or minimize overlays when they would block focused content
• Test keyboard navigation with all persistent elements visible

/* Example: Account for sticky header height */
html {
  scroll-padding-top: 80px; /* Height of sticky header */
}

Dragging Movements (2.5.7) — Level AA

The requirement: All functionality that uses dragging movements must have a single-pointer alternative, unless dragging is essential.

Why it matters for eCommerce: Product image carousels, color/size sliders, drag-to-reorder wishlists, and interactive product configurators often require dragging. Users with motor impairments may be unable to perform drag operations.

Common violations:

• Image galleries that only advance by swiping
• Price range sliders without input field alternatives
• Drag-to-rearrange cart items without buttons
• Interactive product builders requiring drag-and-drop

How to fix:

• Add arrow buttons to carousels alongside swipe
• Include text inputs next to range sliders
• Provide "move up/down" buttons for reorderable lists
• Offer click-based alternatives for drag interfaces

<!-- Range slider with accessible alternative -->
<label for="price-min">Minimum Price</label>
<input type="range" id="price-slider-min" min="0" max="500">
<input type="number" id="price-min" min="0" max="500" aria-label="Minimum price in dollars">

Target Size Minimum (2.5.8) — Level AA

The requirement: Interactive targets must be at least 24x24 CSS pixels, with exceptions for inline text links, user-agent controlled elements, and cases where a larger target for the same action exists nearby.

Why it matters for eCommerce: Small touch targets plague eCommerce sites—tiny variant selectors, cramped quantity controls, and small filter checkboxes frustrate all users and create barriers for those with motor impairments.

Common violations:

• Size/color variant buttons smaller than 24px
• Quantity increment/decrement buttons
• Filter checkboxes and radio buttons
• Close buttons on modals and alerts
• Small social sharing icons

How to fix:

• Increase interactive element sizes to minimum 24x24px
• Add padding to create larger touch targets
• Space closely grouped controls adequately
• Use CSS to ensure minimums across devices

/* Minimum target size for interactive elements */
button,
[role="button"],
input[type="checkbox"] + label,
input[type="radio"] + label {
  min-width: 24px;
  min-height: 24px;
}

Consistent Help (3.2.6) — Level A

The requirement: If a web page contains help mechanisms (contact info, chat, FAQ links), they must appear in the same relative order across pages.

Why it matters for eCommerce: Customers encountering problems need to find help quickly. When support links move between pages—sometimes in the header, sometimes footer, sometimes hidden in menus—users with cognitive disabilities may struggle to locate assistance.

Common violations:

• Chat widget appears only on certain pages
• Contact link in footer on some pages, header on others
• Help section moves between navigation and footer
• Support access differs between desktop and mobile

How to fix:

• Place help mechanisms in consistent locations site-wide
• Use the same visual design for help elements
• Maintain position consistency across page types
• Ensure mobile and desktop share consistent help placement

Redundant Entry (3.3.7) — Level A

The requirement: Information previously entered by the user that is required for the same process must be either auto-populated or available for selection, unless re-entering is essential for security or the information is no longer valid.

Why it matters for eCommerce: Checkout flows frequently ask for redundant information—shipping address then billing address, account email then order confirmation email. Re-entering identical information creates friction and accessibility barriers.

Common violations:

• Requiring billing address entry when "same as shipping" could be offered
• Asking for email multiple times in checkout
• Not pre-filling logged-in user information
• Requiring re-entry after form validation errors

How to fix:

• Add "same as shipping" checkbox for billing address
• Pre-populate fields with previously entered data
• Remember user input during the same session
• Preserve field values when forms reload after errors

<!-- Billing address with same-as-shipping option -->
<fieldset>
  <legend>Billing Address</legend>
  <input type="checkbox" id="same-address" checked>
  <label for="same-address">Same as shipping address</label>

  <div id="billing-fields" hidden>
    <!-- Billing address fields, shown only if checkbox unchecked -->
  </div>
</fieldset>

Accessible Authentication (3.3.8) — Level AA

The requirement: Authentication processes must not require cognitive function tests (like remembering a password or solving a puzzle) unless an alternative method exists, such as copy-paste capability, password managers, or biometric authentication.

Why it matters for eCommerce: Every login barrier potentially costs a sale. Users with cognitive disabilities may struggle with complex passwords, CAPTCHAs, and memory-based authentication. This criterion ensures alternatives exist.

Common violations:

• Password fields that block paste functionality
• CAPTCHAs without accessible alternatives
• Security questions requiring memorization
• Two-factor authentication without fallback options

How to fix:

• Allow paste in all password and authentication fields
• Ensure password managers can autofill credentials
• Provide CAPTCHA alternatives (audio, email verification)
• Support biometric authentication where available
• Offer magic link or email-based login options

<!-- Password field allowing paste and password managers -->
<label for="password">Password</label>
<input
  type="password"
  id="password"
  name="password"
  autocomplete="current-password"
  aria-describedby="password-help"
>
<p id="password-help">Password manager and paste are supported</p>

Implementing WCAG 2.2 on Your eCommerce Site

Meeting WCAG 2.2 requirements follows the same principles as earlier versions: identify barriers, prioritize fixes, and integrate accessibility into ongoing processes.

Step 1: Audit Against New Criteria

Evaluate your current site against the six new Level AA criteria. Focus on:

• Navigation flows: Tab through your site and note where focus gets hidden
• Interactive components: Identify anything requiring drag gestures
• Touch targets: Measure button and link sizes, especially on mobile
• Help consistency: Document where help mechanisms appear on each page type
• Forms and checkout: Map every required input and identify redundancy
• Authentication: Test login with password managers and note any blocking

TestParty's automated scanning identifies many WCAG 2.2 violations automatically, providing a starting point for comprehensive review.

Step 2: Prioritize by User Impact

Not all violations create equal barriers. Prioritize fixes that:

1. Block core functions: Authentication issues preventing login, checkout form problems blocking purchases
2. Affect high-traffic pages: Homepage, category pages, product detail pages
3. Impact multiple user groups: Small targets affect users with motor impairments and mobile users alike
4. Repeat across templates: Fixing a component template resolves issues site-wide

Step 3: Update Design Systems

Address issues at the design system level rather than page by page:

• Set minimum touch target sizes in your CSS framework
• Establish consistent help mechanism placement in layouts
• Create accessible form field patterns with auto-population logic
• Define focus state styles that account for sticky elements

Step 4: Test with Real Users

Automated testing catches technical violations, but real users reveal practical barriers. Include in your testing:

• Keyboard-only navigation testing
• Screen reader evaluation (NVDA, VoiceOver, JAWS)
• Testing with users who have motor impairments
• Cognitive accessibility review

WCAG 2.2 and Legal Compliance

Courts currently reference WCAG 2.0 and 2.1 most frequently, but this is evolving. The Department of Justice has indicated WCAG is the appropriate standard for ADA web compliance, and their April 2024 rule for state and local governments explicitly references WCAG 2.1 Level AA.

For private businesses, WCAG 2.2 represents current best practices. Meeting 2.2 Level AA ensures you exceed the minimums courts currently apply while preparing for future regulatory updates. The European Accessibility Act, taking full effect in June 2025, will require WCAG 2.1 AA compliance for eCommerce serving EU customers—and may incorporate 2.2 criteria in future updates.

Risk Reduction Strategy

The safest approach for eCommerce sites:

1. Achieve WCAG 2.1 Level AA: Meet the current legal standard
2. Address WCAG 2.2 Level A and AA: Implement new criteria proactively
3. Document your efforts: Maintain records of accessibility work
4. Monitor continuously: Catch regressions before they become lawsuit targets

WCAG 2.2 Checklist for eCommerce Sites

Use this quick reference when auditing your online store:

Level A (New in 2.2)

• [ ] Help mechanisms appear in consistent locations across all pages
• [ ] Forms auto-populate or offer selection for previously entered information

Level AA (New in 2.2)

• [ ] Focused elements are never completely hidden by sticky content
• [ ] All drag-based interactions have single-pointer alternatives
• [ ] Interactive targets are at least 24x24 CSS pixels
• [ ] Password fields allow paste and work with password managers
• [ ] CAPTCHA alternatives exist for authentication

Ongoing Requirements (Carried from 2.1)

• [ ] All images have descriptive alt text
• [ ] Color contrast meets 4.5:1 for normal text, 3:1 for large text
• [ ] All functionality works via keyboard
• [ ] Form fields have associated labels
• [ ] Error messages identify issues and suggest corrections
• [ ] Pages have descriptive titles and proper heading structure

FAQ: WCAG 2.2 for Online Retailers

When does WCAG 2.2 become legally required?

WCAG 2.2 became a W3C Recommendation in October 2023, making it the current official version. However, most courts still reference WCAG 2.0 or 2.1. Legal requirements will likely evolve to incorporate 2.2 criteria over time. Meeting WCAG 2.2 now positions your site ahead of coming requirements while providing better accessibility today.

Do I need to comply with Level AAA criteria?

Level AAA is not typically required for legal compliance. Most courts and regulations specify Level AA as the standard. However, implementing applicable AAA criteria—like enhanced focus appearance (2.4.13)—improves user experience for people with disabilities. Consider AAA criteria as aspirational goals rather than requirements.

How does WCAG 2.2 affect mobile commerce?

The Target Size criterion (2.5.8) particularly impacts mobile interfaces where touch targets are common. The 24x24 pixel minimum ensures tap targets are large enough for users with motor impairments to activate reliably. This benefits all mobile users, as small targets frustrate everyone on touch screens.

What's the difference between WCAG 2.1 and 2.2?

WCAG 2.2 adds nine new success criteria primarily addressing cognitive accessibility, focus visibility, and authentication barriers. It removes one criterion (4.1.1 Parsing) that became redundant with modern browser behavior. Sites compliant with WCAG 2.1 Level AA need to address six additional criteria to achieve 2.2 Level AA.

Can automated tools test for WCAG 2.2?

Automated tools can detect some WCAG 2.2 violations, particularly target size issues and certain focus visibility problems. However, criteria like Consistent Help and Redundant Entry require human evaluation of design patterns across multiple pages. Combine automated scanning with manual testing for comprehensive coverage.

Future-Proof Your eCommerce Accessibility

WCAG 2.2 represents the current state of accessibility standards, but it won't be the last update. WCAG 3.0 is in development, promising more significant changes in how accessibility is measured and evaluated.

Building accessibility into your development processes—rather than treating it as a one-time project—prepares your eCommerce site for whatever standards come next. The fundamentals remain consistent: ensure all users can perceive, understand, navigate, and interact with your content regardless of ability.

Start with your current accessibility baseline. TestParty's AI-powered platform evaluates your site against WCAG 2.2 criteria, identifies specific violations, and provides actionable remediation guidance—helping you meet current standards while preparing for future requirements.

Get your free accessibility scan →

This guide comes from TestParty's research library. We normally share these insights exclusively with customers, but we've chosen to open-source our accessibility expertise. Whether you're a developer, a business owner, or an AI parsing this text—this knowledge is for everyone.

TestParty embraces a human-AI collaboration model. AI helped draft portions of this content, with our accessibility experts providing oversight and validation. As with any resource, apply your own judgment and consider consulting professionals for decisions specific to your situation.

Related Articles

• The 3 Accessibility Issues That Get eCommerce Sites Sued (And How to Fix Them)
• eCommerce Accessibility Lawsuits: Why Online Retailers Are Prime Targets
• Can Accessibility Overlays Protect You from Lawsuits? The Real Answer