ADA and WCAG 2.2 for E-commerce: A Storefront Checklist That Prevents Lawsuits

This guide translates WCAG 2.2 into an e-commerce to-do list that reduces legal risk and increases conversions. It focuses on the flows that matter most: product discovery, PDP, cart, checkout, and account.

Not legal advice. Consult counsel for compliance decisions.
WCAG 2.2 is the current W3C recommendation and adds nine new success criteria to WCAG 2.1. The DOJ has finalized a rule requiring WCAG 2.1 AA for state and local governments under ADA Title II. Private businesses do not yet have a binding technical standard, but DOJ guidance states the ADA applies to websites of businesses open to the public, and WCAG is the common yardstick.

Why this matters now

• Risk: Plaintiffs often target checkout friction, missing labels, and popups that trap focus. Title II’s new rule references WCAG 2.1 AA. While Title III lacks a final rule, aligning to WCAG 2.2 AA positions you well.

• Revenue: Accessible sites lift conversion by clarifying labels, error handling, and focus order.

• Roadmap clarity: WCAG defines testable success criteria at A, AA, AAA levels. Most organizations target AA.

What changed in WCAG 2.2 that affects stores

New criteria with high impact on retail flows include: Focus Not Obscured, Focus Appearance, Dragging Movements, Target Size (Minimum), Consistent Help, Redundant Entry, and Accessible Authentication (Minimum and Enhanced). These address visible focus, touch targets, drag-only actions, repeated data entry, and login barriers.

How to use this checklist

1. Run automated scans on templates.

2. Do fast manual sweeps with only a keyboard and a screen reader.

3. Prioritize by legal risk and funnel impact, starting with checkout.

1) Sitewide and navigation

• Keyboard access works everywhere. Menus, drawers, and carousels are operable with Tab, Shift+Tab, Enter, and Space.
  Quick test: Unplug your mouse and traverse an entire session.

• Visible focus that is not hidden by sticky elements. Focus styles are thick and high contrast, and never sit under a fixed header. (WCAG 2.2: Focus not obscured, Focus appearance.)

• Skip links and landmarks. Provide skip to content and consistent <nav>, <main>, <footer> landmarks.

2) Search, filters, and sort

• Facets work from the keyboard. Arrow keys move, Space toggles, Enter applies.

• Announce filter changes. Use polite live regions so screen readers hear “12 results” after a filter update.

• State persists. Back, forward, and pagination preserve filter state.

3) Product listing pages (PLP)

• Headings and lists are semantic. Product grids are lists with each tile as a list item and a unique, descriptive link.

• Infinite scroll has a manual option. Provide “Load more” or pagination.

4) Product detail pages (PDP)

• Alt text for media and swatches. Describe product imagery and color swatches programmatically.

• No drag-only actions. Gallery zoom and 360 views offer click or keyboard alternatives. (WCAG 2.2: Dragging movements.)

• Information is not color-only. Price changes, stock, and promotions have text and icons, not color alone.

• Size guides are accessible. Tables have headers, and modal content traps focus and returns focus on close.

5) Media and documents

• Captions and transcripts. Videos have accurate captions. Audio has transcripts.

• Motion control. Autoplay is off. Animations can be paused.

• Accessible PDFs. Tag, order, and title documents before upload.

6) Cart

• Announcements for changes. Add to cart, remove, and quantity updates are announced to assistive tech.

• Editable items with clear labels. Quantity inputs, variant selectors, and remove buttons are labeled and reachable.

• Shipping estimates are readable. Live regions announce updated totals.

7) Checkout and payments

• Labels, instructions, and errors are programmatic. Use label, aria-describedby, and inline error text.

• No drag requirement. Do not require drag to complete any step. (WCAG 2.2: Dragging movements.)

• No repeated data entry. Do not make users retype data the system already knows. Provide “Same as shipping” and prefill. (WCAG 2.2: Redundant entry.)
  
  
• Passwords are humane. Allow copy-paste, password managers, and show password. Avoid puzzles or memory tests. Provide alternatives like copy-paste from password managers or device biometrics. (WCAG 2.2: Accessible authentication.)
  
  
• Help is easy to find. Keep help in a consistent spot across steps. (WCAG 2.2: Consistent help.)

8) Promotions, popups, and chat

• Modals behave. On open, focus moves into the modal. Tab stays inside. On close, focus returns to the trigger.

• No blocking timers. Promotions and cookie banners do not block the primary task.

• Third parties are accessible. Vet chat widgets and A/B tools for keyboard and screen reader support.

9) Mobile and touch

• Targets meet minimum sizes. Primary controls meet touch target minimums and have spacing. (WCAG 2.2: Target size minimum.)

• Tap alternatives to drag. Sliders and carousels provide tap controls.

• Reachability. Key CTAs are within the viewport and visible when the keyboard is open.

10) Forms and account

• Group and label fields. Use fieldsets and legends for address and payment groups.

• Validation is polite and clear. Announce errors near fields. Provide remedial tips, not only red borders.

• Authentication options. Offer login by email link or device auth for cognitive accessibility. (WCAG 2.2: Accessible authentication.)

11) Color and contrast

• Text and controls meet contrast. Check text, icons that convey meaning, and focus indicators.

• Do not rely on color only. Pair color with text or icons.

12) Performance and motion

• Respect user settings. Honor Reduced Motion and High Contrast modes.

• Avoid layout shifts during interaction. Do not move focus or content unexpectedly.

Fast testing plan for real teams

Automated first pass

• Run axe or similar on PLP, PDP, cart, checkout, account. Bucket issues by template.

Manual essentials

• Keyboard-only path from landing to order confirmation.

• Screen reader smoke test on NVDA or VoiceOver.

• Mobile touch target spot checks on iOS and Android.

Assistive tech matrix

• Desktop: Chrome with NVDA, Safari with VoiceOver

• Mobile: iOS VoiceOver, Android TalkBack

Definition of done

• Acceptance criteria per template.

• Accessibility checks in CI on every PR.

• Audit log of issues and fixes.

Tip: To verify Focus Not Obscured and Focus Appearance, tab through every control and confirm the indicator is clearly visible and meets thickness and contrast guidance.

Notes for .NET, Umbraco, and nopCommerce

• Use accessible component libraries. Centralize focus styles, error summaries, and form patterns in a shared UI library so every team gets the fix.

• Check plugins early. Validate accessibility of third-party themes, payment widgets, carousels, and chat before adoption.

• Server-side rendering helps. Use semantic HTML, ARIA only when needed, and predictable DOM order.

• Content ops in Umbraco. Provide fields for alt text, transcripts, and promo copy that includes non-color cues.

• nopCommerce specifics. Audit category filters, product tiles, and checkout extensions for keyboard access and live announcements.

What level to target

Aim for WCAG 2.2 AA across the storefront. Track AAA items where they deliver clear UX value. WCAG success criteria are testable and define conformance levels used by auditors and regulators.

FAQs

Do I need WCAG 2.2 AA or AAA?
AA is the common target. Add AAA items when they improve core tasks.

Does the ADA name a specific standard?
For state and local government, yes. The DOJ’s final rule specifies WCAG 2.1 AA. For private businesses, DOJ guidance affirms ADA coverage without naming a binding technical standard, but WCAG is the accepted benchmark.

How often should we retest?
Add checks to CI and retest templates after any component or plugin change.