E-commerce WCAG 2.2 Requirements: What Retailers Must Know

WCAG 2.2 Level AA is the de facto standard for e-commerce accessibility compliance. Published by the W3C in October 2023, WCAG 2.2 contains 86 success criteria that courts, DOJ guidance, and settlement agreements consistently reference as the measure of ADA compliance. Understanding these requirements—and which matter most for e-commerce—helps retailers prioritize remediation and achieve genuine compliance.

This guide covers the WCAG 2.2 criteria most relevant to e-commerce, what changed from previous versions, common violations in online stores, and how to achieve compliance efficiently.

Key Takeaways

WCAG 2.2 AA compliance is achievable for e-commerce when you understand what matters most.

• 86 success criteria across three conformance levels (A, AA, AAA)
• Level AA is the standard for legal compliance—includes all Level A criteria
• WCAG 2.2 adds 9 new criteria including enhanced focus, authentication, and consistent help
• E-commerce priority criteria focus on forms, images, navigation, and checkout
• 14-30 days to compliance achievable with source code remediation

Understanding WCAG 2.2 Structure

Before diving into specific requirements, understand how WCAG is organized.

The POUR Principles

WCAG organizes requirements around four principles, remembered by the acronym POUR.

Perceivable: Information must be presentable in ways users can perceive. This includes alt text for images, captions for videos, sufficient color contrast, and text alternatives for non-text content.

Operable: Interface components must be operable by all users. This includes keyboard accessibility, no seizure-inducing content, navigation aids, and sufficient time for interactions.

Understandable: Information and operation must be understandable. This includes readable text, predictable behavior, input assistance, and error prevention.

Robust: Content must be robust enough for assistive technologies. This includes valid code, proper ARIA implementation, and name/role/value for custom controls.

Conformance Levels

WCAG defines three conformance levels. Legal compliance requires Level AA, which includes all Level A criteria.

Level A: Essential requirements. Failure means content is completely inaccessible to some users. Examples: text alternatives for images, keyboard accessibility, no keyboard traps.

Level AA: Standard compliance level. This is what courts and regulations require. Adds requirements for contrast ratios, reflow, focus visibility, and status messages.

Level AAA: Enhanced accessibility. Not typically required for legal compliance but valuable for certain audiences. Includes stricter contrast, sign language for media, and more extensive text alternatives.

What's New in WCAG 2.2

WCAG 2.2 added 9 new success criteria, several particularly relevant to e-commerce.

2.4.11 Focus Not Obscured (Minimum) - AA: When a component receives focus, it must not be entirely hidden by author-created content. Important for modal overlays and sticky headers.

2.4.12 Focus Not Obscured (Enhanced) - AAA: Stricter version requiring no part of focused component to be hidden.

2.4.13 Focus Appearance - AAA: Specifies minimum focus indicator size and contrast.

2.5.7 Dragging Movements - AA: Functionality requiring dragging must have single-pointer alternatives. Affects slider controls and drag-to-reorder features.

2.5.8 Target Size (Minimum) - AA: Interactive targets must be at least 24×24 CSS pixels, with exceptions. Important for mobile checkout buttons.

3.2.6 Consistent Help - A: Help mechanisms must appear in the same location across pages.

3.3.7 Redundant Entry - A: Information previously entered shouldn't need re-entry in the same process.

3.3.8 Accessible Authentication (Minimum) - AA: Authentication shouldn't require cognitive function tests (like CAPTCHAs) without alternatives.

3.3.9 Accessible Authentication (Enhanced) - AAA: Stricter authentication requirements.

E-commerce Priority WCAG Criteria

Not all 86 criteria equally affect e-commerce. These appear most frequently in lawsuits and impact customer experience most significantly.

1.1.1 Non-text Content (Level A)

All non-text content must have text alternatives that serve the equivalent purpose.

E-commerce application: Every product image needs descriptive alt text. For a store with 500 products averaging 4 images each, that's 2,000 alt text descriptions required.

Common violations: Product images with no alt text, images with filename gibberish ("IMG_3847.jpg"), decorative images not properly marked as decorative.

Implementation: ```html <!-- Product image with descriptive alt text --> <img src="blue-wool-sweater.jpg" alt="Navy blue merino wool crewneck sweater with ribbed cuffs and hem">

<!-- Decorative image properly marked --> <img src="decorative-divider.png" alt="" role="presentation"> ```

1.4.3 Contrast (Minimum) (Level AA)

Text must have at least 4.5:1 contrast ratio against background (3:1 for large text).

E-commerce application: Button text, price displays, promotional banners, form labels, placeholder text, footer links—all must meet contrast requirements.

Common violations: Light gray text on white backgrounds, low-contrast promotional overlays, placeholder text that fails contrast, sale prices in light red.

The WebAIM Million Report found 81% of home pages fail contrast requirements—the most common accessibility violation.

2.1.1 Keyboard (Level A)

All functionality must be operable via keyboard.

E-commerce application: Navigation menus, product filtering, size selection, add-to-cart, checkout flow—everything must work with Tab, Enter, Space, and arrow keys.

Common violations: Dropdown menus requiring mouse hover, product quick-view that can't be closed via keyboard, payment method selection requiring clicks, size selectors not keyboard accessible.

2.4.7 Focus Visible (Level AA)

Keyboard focus indicator must be visible.

E-commerce application: As users tab through your site, they must see which element is focused at all times.

Common violations: CSS that removes focus outlines (`outline: none`), focus indicators with insufficient contrast, custom components without focus styling.

/* Problem CSS */
*:focus { outline: none; }

/* Accessible CSS */
:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

3.3.1 Error Identification (Level A)

If an input error is detected, the error must be identified and described to the user in text.

E-commerce application: Checkout form validation must clearly identify what's wrong and where.

Common violations: Errors shown only with red borders, generic "Error" messages without specifics, errors not associated with problem fields.

3.3.2 Labels or Instructions (Level A)

Labels or instructions must be provided for user input.

E-commerce application: Every form field—checkout, newsletter signup, account creation—needs a visible, associated label.

Common violations: Placeholder text used instead of labels, labels not programmatically associated with inputs, icon-only inputs without accessible names.

<!-- Wrong: placeholder only -->
<input type="email" placeholder="Email address">

<!-- Correct: proper label -->
<label for="email">Email address</label>
<input type="email" id="email">

4.1.2 Name, Role, Value (Level A)

Custom controls must expose name, role, and value to assistive technologies.

E-commerce application: Custom dropdowns, accordion FAQs, modal dialogs, product filters, quantity spinners—all need proper ARIA.

Common violations: Custom dropdowns without ARIA roles, modals that don't announce to screen readers, toggle switches without state information.

WCAG 2.2 for E-commerce Checkout

Checkout deserves special attention because failures directly block purchases.

Form Labeling Requirements

Every checkout field needs proper implementation meeting multiple criteria (1.3.1, 3.3.2, 1.3.5).

<div class="form-field">
  <label for="shipping-address">Street address</label>
  <input type="text"
         id="shipping-address"
         name="address"
         autocomplete="shipping street-address"
         required>
</div>

Key requirements include visible labels (not just placeholders), proper for/id associations, autocomplete attributes for standard fields, and clear indication of required fields.

Error Handling Requirements

When validation fails, multiple criteria apply (3.3.1, 3.3.3, 4.1.3).

<label for="email">Email address</label>
<input type="email"
       id="email"
       aria-describedby="email-error"
       aria-invalid="true">
<span id="email-error" role="alert">
  Please enter a valid email address (example: name@domain.com)
</span>

Requirements include text descriptions of errors (not just color), programmatic association with fields, suggestions for correction when possible, and announcements to assistive technologies.

WCAG 2.2 Additions for Checkout

New WCAG 2.2 criteria affect checkout specifically.

3.3.7 Redundant Entry (A): Information entered earlier in checkout shouldn't require re-entry. If shipping address was entered, don't require it again for billing without autofill option.

3.3.8 Accessible Authentication (AA): Don't require CAPTCHAs without accessible alternatives. If using authentication steps, provide options that don't require cognitive function tests.

2.5.8 Target Size (AA): Checkout buttons and interactive elements must be at least 24×24 pixels. Mobile checkout is particularly affected.

Common E-commerce WCAG Violations

The WebAIM Million Report identifies violations across millions of websites. Here's how they apply to e-commerce.

Missing Alternative Text (1.1.1)

54.5% of websites have images without alternative text. For e-commerce with extensive product catalogs, this multiplies dramatically.

Fix: Implement alt text for all product images. Use descriptive text that conveys what the image shows—not generic text like "product image" but specific descriptions like "Men's slim fit navy chinos with button closure."

Low Contrast Text (1.4.3)

81% of websites fail contrast requirements—the most common violation.

Fix: Audit all text elements including buttons, promotional text, form labels, prices, and footer content. Use WebAIM's Contrast Checker or built-in browser tools to verify 4.5:1 ratio.

Missing Form Labels (3.3.2)

48.6% of websites have form inputs without proper labels.

Fix: Add visible labels to all form fields. Use proper for/id associations. Never rely on placeholder text alone.

Empty Links (2.4.4)

44.6% of websites have links without accessible text.

Fix: Ensure all links have descriptive text. For icon-only links, add aria-label or visually hidden text.

<!-- Problem: icon only -->
<a href="/cart"><i class="cart-icon"></i></a>

<!-- Solution: accessible text -->
<a href="/cart" aria-label="View shopping cart">
  <i class="cart-icon" aria-hidden="true"></i>
</a>

Missing Document Language (3.1.1)

17.1% of websites don't specify page language.

Fix: Add lang attribute to html element.

<html lang="en">

Achieving WCAG 2.2 AA Compliance

Understanding requirements is different from achieving compliance. Here are the approaches.

Automated Testing Limitations

Automated tools catch 30-50% of WCAG violations. They're useful for identifying issues like missing alt text, contrast failures, and missing form labels.

Tools: WAVE browser extension, axe DevTools, Lighthouse.

Limitations: Can't evaluate alt text quality. Can't test keyboard navigation paths. Can't verify screen reader experience. Manual testing required for complete assessment.

Manual Testing Requirements

Complete WCAG compliance requires human testing with assistive technologies.

Keyboard testing: Navigate entire purchase flow using only Tab, Enter, Space, and arrow keys.

Screen reader testing: Use VoiceOver (Mac), NVDA (Windows), or TalkBack (Android) to experience your site as blind users do.

Cognitive review: Evaluate whether error messages are clear, navigation is predictable, and help is available.

Source Code Remediation

TestParty combines automated scanning with expert remediation to achieve WCAG 2.2 AA compliance.

Spotlight scans daily, identifying violations across your entire store. Bouncer integrates with development workflows to prevent new issues. Expert remediation delivers actual code fixes via pull requests. Monthly audits provide human testing beyond automation.

Most e-commerce stores achieve WCAG 2.2 AA compliance in 14-30 days. Cozy Earth fixed 8,000+ issues in 2 weeks. TUSHY achieved compliance in 30 days. <1% of TestParty customers have been sued while using the platform.

Frequently Asked Questions

What WCAG level do e-commerce sites need?

E-commerce sites need WCAG 2.2 Level AA compliance. This is the standard referenced in ADA lawsuits, DOJ guidance, and settlement agreements. Level AA includes all Level A criteria plus additional requirements for contrast, focus visibility, and status messages. Level AAA is enhanced but not legally required.

What's new in WCAG 2.2 for e-commerce?

WCAG 2.2 adds 9 new criteria including accessible authentication (no CAPTCHAs without alternatives), redundant entry prevention, minimum target sizes (24×24 pixels), focus not being obscured by overlays, and dragging movement alternatives. These particularly affect checkout flows and mobile shopping experiences.

What are the most important WCAG criteria for online stores?

The highest-priority WCAG criteria for e-commerce are 1.1.1 (alt text for product images), 3.3.2 (form labels for checkout), 1.4.3 (contrast for all text), 2.1.1 (keyboard accessibility), and 4.1.2 (proper ARIA for custom components). These appear most frequently in lawsuits and directly affect purchase completion.

How do I know if my e-commerce site meets WCAG 2.2?

Start with automated scanning using WAVE or axe DevTools to identify obvious violations. Then test keyboard navigation through your entire purchase flow. Test with a screen reader to verify announcements are correct. For complete assessment, you need expert evaluation—automated tools catch only 30-50% of issues.

How long does WCAG 2.2 compliance take for e-commerce?

With source code remediation, most e-commerce stores achieve WCAG 2.2 AA compliance in 14-30 days. Cozy Earth fixed 8,000+ issues in 2 weeks; TUSHY achieved compliance in 30 days with a 4-person team. Traditional audit-then-implement approaches take 3-6 months. DIY approaches vary widely based on expertise and resources.

Do overlays achieve WCAG 2.2 compliance?

No. Overlay widgets inject JavaScript that doesn't fix source code issues. Screen readers interact with actual HTML before overlay JavaScript executes. Over 800 businesses using overlays were sued in 2023-2024. The FTC fined AccessiBe $1 million for claiming their product achieves compliance when it does not.

Related Resources

For more WCAG and e-commerce accessibility guidance:

• WCAG 2.2 E-commerce Requirements — Detailed technical requirements
• E-commerce Accessibility Compliance Guide — Comprehensive implementation guide
• E-commerce Checkout Accessibility — Checkout-specific WCAG requirements
• Best WCAG Tools for E-commerce — Testing tool comparison
• Part 1: How to Fix Common Shopify Accessibility Issues — Implementation guidance

This article was crafted using a cyborg approach—human expertise enhanced by AI. Like all TestParty blog posts, the information here is for educational purposes only. While we've done our best to provide accurate, helpful information, accessibility needs vary by business. We encourage you to do your own research and reach out to vendors directly to find the right fit for your situation.