WCAG 2.2 for Ecommerce: The Accessibility Checklist That Protects Your Store (and Your Revenue)

WCAG 2.2 became the official W3C recommendation in October 2023, and by 2026 it's the standard that ADA lawsuits and DOJ guidance are measured against. For ecommerce stores, it's not just a legal obligation — it's a revenue opportunity. Here's what changed, what it means for your store, and how to audit for compliance.

What WCAG 2.2 Adds Over 2.1

WCAG 2.1 had 78 success criteria. 2.2 adds 9 new ones (and deprecates one). The new criteria are where most ecommerce stores will fail an audit:

2.4.11 Focus Appearance (AA)

Keyboard focus indicators must meet a minimum size and contrast ratio. The default browser focus ring often fails this. Any custom focus styles that make the indicator smaller or lower-contrast are non-compliant. Check every interactive element: buttons, links, form fields, dropdowns, carousels.

2.5.7 Dragging Movements (AA)

Any functionality that requires dragging (think: range sliders for price filtering, drag-to-rearrange wishlists, slider carousels) must have a single-pointer alternative. A user who can't perform a drag gesture must still be able to accomplish the task with a click or tap.

2.5.8 Target Size (Minimum) (AA)

Touch targets must be at least 24x24 CSS pixels, or have at least 24px of spacing from adjacent targets. This affects icon buttons, small "remove" links in cart, close buttons on modals, and filter checkboxes. Many ecommerce UIs fail this silently.

3.2.6 Consistent Help (A)

If a help mechanism (live chat, contact link, phone number) appears on multiple pages, it must appear in the same relative position on each page. Floating chat widgets that appear in different corners on different page types fail this.

3.3.7 Redundant Entry (A)

If a user has already entered information in a checkout flow, they shouldn't be required to enter it again unless there's a security reason. Auto-filling shipping from billing address isn't just good UX — it's now a WCAG 2.2 requirement.

3.3.8 Accessible Authentication (Minimum) (AA)

Authentication steps (login, checkout as guest/account) can't require solving a cognitive function test — including traditional CAPTCHAs — without offering an alternative. This doesn't mean no CAPTCHA, but it means you need an accessible alternative: an object recognition CAPTCHA, a copy-paste-based challenge, or another method that doesn't require memorization or transcription.

2.4.12 Focus Not Obscured (Minimum) (AA)

When a component receives keyboard focus, it must not be entirely hidden by a sticky header, cookie banner, or other sticky element. Sticky navigation bars that cover focused elements fail this.

The Legal and Business Case

Legal Risk

ADA Title III lawsuits against ecommerce stores have grown year over year since 2018. The DOJ issued guidance in 2022 affirming that the ADA applies to websites. Settlements average $25,000–$100,000 for small stores; larger retailers have paid multiples of that. Serial plaintiffs file hundreds of cases per year targeting ecommerce specifically, because product pages are easy to test at scale.

WCAG 2.2 Level AA is now the de facto legal standard cited in settlements and DOJ guidance. If your store doesn't meet it, you're exposed.

The Revenue Argument

Approximately 15% of the global population — over 1 billion people — live with some form of disability. In the United States, people with disabilities have $490 billion in disposable income. An inaccessible checkout flow, an unlabeled form field, or a color contrast failure that makes your CTA unreadable for someone with low vision is revenue you're leaving on the table. Accessibility fixes frequently improve conversion rates for all users, not just users with disabilities.

Key Checks for Product Pages

• Alt text for all product images — required for screen readers. Decorative images use empty alt (alt=""). Functional images use descriptive alt text.
• Color contrast on CTAs — "Add to Cart" buttons must have at least 4.5:1 contrast ratio (text on background). Use a contrast checker on every button variant including hover and disabled states.
• Keyboard navigation — Tab through your product page. Every interactive element — image gallery arrows, size selectors, color swatches, quantity adjusters, Add to Cart — must be reachable and operable via keyboard only.
• Focus visibility — the focused element must have a visible focus indicator at all times. If your CSS includes outline: none without a replacement, you've failed WCAG 2.4.7.
• Headings structure — H1 for product name, H2 for major sections (Description, Reviews, Related Products). Screen readers navigate by heading; a broken heading structure is disorienting.

Checkout Accessibility

Checkout is where accessibility failures cost real money. Common issues:

• Unlabeled form fields — every input (name, address, email, card number, CVV) must have a <label> element associated via for attribute or aria-label. Placeholder text alone doesn't count.
• Error messages — form validation errors must be announced to screen readers (use role="alert" or aria-live) and must identify which field has the error in text, not just by color.
• Timeout warnings — if your session expires mid-checkout, users must be warned before it happens and given the ability to extend. Silent session expiration fails WCAG 2.2.1.
• CAPTCHA alternatives — per the new 3.3.8 criterion, offer an alternative to image-recognition CAPTCHAs.
• Redundant entry — pre-fill billing address from shipping (or shipping from billing) when the user checks "same address." Required by 3.3.7.

Running an Audit

Automated tools catch roughly 30-40% of WCAG issues. The rest require manual testing. A practical lightweight audit:

1. Run an automated scan first — catches obvious failures (missing alt text, contrast failures, missing labels) quickly.
2. Tab through the full purchase flow without a mouse — homepage → product page → cart → checkout. Note anything you can't reach or activate.
3. Test with a screen reader (NVDA on Windows, VoiceOver on Mac/iOS, TalkBack on Android). Navigate by heading, then by form field. Try to complete a purchase.
4. Check color contrast on all CTAs and body text using a browser extension or contrast checker.
5. Check focus indicators on every interactive element.

The StoreVitals Accessibility Checker automates the first pass — it scans any URL for WCAG 2.2 issues and surfaces the highest-impact failures with remediation guidance. Run it on your product pages and checkout flow as a starting point for a full audit.

Bottom Line

WCAG 2.2 isn't optional for ecommerce in 2026. The legal exposure is real, the revenue impact of exclusion is measurable, and the fixes — once you've identified the issues — are often straightforward. Start with an automated scan to find the quick wins, then work through the manual testing checklist. Your store becomes more usable for everyone, and your legal risk shrinks considerably.