WCAG 2.1 AA checklist for ecommerce stores

WCAG 2.1 AA is the accessibility standard referenced by the ADA, the European Accessibility Act and most national accessibility regulations. It contains 50 success criteria organized under four principles: Perceivable, Operable, Understandable and Robust.

Most WCAG guidance is written for generic websites. Ecommerce stores have specific patterns that generic checklists miss: product variant selectors, quantity steppers, filter facets, add-to-cart interactions, multi-step checkout forms and dynamically updated cart drawers. Those are the patterns that generate ADA complaints and EAA enforcement actions.

This checklist focuses on the criteria that matter most for ecommerce, organized by WCAG principle. It is not a replacement for a full audit. It is a starting point for the issues that cause real harm to users and real legal exposure to stores.

Perceivable

Perceivable criteria require that all information and user interface components be presentable to users in ways they can perceive. For ecommerce, this is primarily about images, media and visual-only communication.

1.1.1 Non-text Content (Level A)

Every non-decorative image must have a text alternative. For ecommerce this is not just a technicality: product images are the primary way customers evaluate what they are buying. A screen reader user navigating your product catalog without alt text has no way to understand what is in each image.

• Product images must have descriptive alt text that conveys what the product looks like. "Blue merino wool crew neck sweater" is useful. "Product image" is not.
• Product variant images (color swatches, size previews) must update their alt text when the selected variant changes.
• Promotional banner images must have alt text describing the offer, including any discount codes or deadlines shown in the image.
• Decorative images (background textures, dividers) must use alt="" so screen readers skip them.
• Image carousels must provide alt text for each slide and controls to pause rotation.

1.3.1 Info and Relationships (Level A)

Information conveyed through visual presentation must also be conveyed programmatically. Ecommerce stores frequently fail this by using color alone to communicate meaning.

• Sale prices must not be indicated by red color alone. Use text ("Sale" or "Was $X, now $Y") in addition to color.
• Out-of-stock states must not be indicated by graying out a button alone. Add an aria-disabled attribute and visible "Out of stock" text.
• Required form fields must be marked programmatically with aria-required="true" or the HTML required attribute, not just an asterisk.
• Product ratings must use semantic markup. A star rating displayed as images needs corresponding text ("4.2 out of 5 stars, 312 reviews").
• Table-based size guides must use proper <th> headers with scope attributes.

1.3.3 Sensory Characteristics (Level A)

Instructions must not rely on shape, color, size or visual location alone. Ecommerce stores fail this most often in product configuration interfaces.

• Size selectors that use only a visual grid of letters (S, M, L) without accessible names fail this criterion if the currently selected size is indicated only by a border color change.
• Filter interfaces that say "use the panel on the left" fail for users who cannot see the layout.

1.4.1 Use of Color (Level A)

Color must not be the only visual means of conveying information, indicating an action or distinguishing a visual element. This is one of the most common failures in ecommerce.

• Color swatch selectors must identify the color in text, not just visually. A user who cannot distinguish red from green needs to read "Red" or "Green" somewhere accessible.
• Form validation errors must not rely on red borders alone. Add error icons and visible error messages.
• Availability indicators (green dot for in stock, red for out of stock) need text labels.

1.4.3 Contrast Minimum (Level AA)

Normal text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt or 14pt bold) must meet 3:1. This is one of the most commonly cited violations in ADA complaints.

• Light gray product descriptions on white backgrounds are a near-universal failure in ecommerce themes.
• Placeholder text in form inputs routinely fails. WCAG does not exempt placeholder text from contrast requirements.
• Sale price badges with white text on light green backgrounds often fall below 4.5:1.
• Check contrast for all interactive states: hover, focus, active and disabled. Disabled states are exempt, but check your design decisions around disabled buttons (like a grayed-out checkout button when the cart is empty).

1.4.4 Resize Text (Level AA)

Text must be resizable up to 200% without loss of content or functionality. Use relative units (rem, em) rather than fixed pixel values for font sizes.

1.4.10 Reflow (Level AA)

Content must reflow to a single column at 320px CSS width without horizontal scrolling. Product grids that use fixed-width columns, filter sidebars that do not collapse on mobile and checkout forms with side-by-side inputs that do not stack are common failures.

Operable

Operable criteria require that all user interface components and navigation be operable by all users. Keyboard accessibility is the primary concern here. If something works only with a mouse, it fails.

2.1.1 Keyboard (Level A)

All functionality must be available using a keyboard. This is the most impactful criterion for ecommerce because checkout flows rely on complex interactive components. See our keyboard navigation guide for full implementation details.

• Every interactive element must be reachable and operable via Tab, Enter and arrow keys.
• Custom dropdown menus for size or quantity selection must respond to keyboard input. A native <select> element handles this automatically. A custom styled dropdown must implement it explicitly.
• Product image zoom on hover must also be triggerable by keyboard (or provide an alternative).
• Drag-and-drop cart reordering must have a keyboard alternative.
• Filter sliders (price range, rating) must accept arrow key input.
• Add-to-cart buttons injected by third-party apps (upsell tools, bundle builders) must be keyboard accessible.

2.1.2 No Keyboard Trap (Level A)

Keyboard focus must not be trapped in a component unless it is a modal dialog that intentionally contains focus, and even then users must be able to close it and return focus to the trigger.

• Cart drawers that open on add-to-cart must trap focus correctly and release it when closed.
• Cookie consent banners that appear on load must not trap focus before the user can interact with the main content.
• Checkout payment iframes (Stripe, Braintree) can sometimes create keyboard traps. Test this explicitly.
• Chat widget overlays are a common trap source. Test that pressing Escape closes the chat and returns focus to the trigger button.

2.4.1 Bypass Blocks (Level A)

A mechanism must be available to skip blocks of content that repeat on multiple pages. Add a skip link as the first element in your page, pointing to the main content area.

2.4.3 Focus Order (Level A)

Focus must move in a logical order that preserves meaning and operability. Ecommerce stores frequently break this with dynamically injected content.

• When a cart drawer opens, focus must move into the drawer. When it closes, focus must return to the add-to-cart button that triggered it.
• After a form submission error, focus must move to the error summary or the first error field.
• Multi-step checkout must move focus to the top of each new step when the user advances.

2.4.4 Link Purpose (Level A)

The purpose of each link must be clear from the link text alone or from the link text combined with its programmatic context.

• "Learn more" links on product cards fail unless the linked product name is included in the accessible name: aria-label="Learn more about the Merino Wool Sweater".
• "Add to cart" buttons that appear multiple times on a page must distinguish which product they apply to.
• Icon-only buttons (wishlist heart, delete from cart trash icon) must have aria-label attributes.

2.4.7 Focus Visible (Level AA)

Keyboard focus indicators must be visible. Many ecommerce themes remove the default browser focus ring with outline: none or outline: 0 and do not replace it with a custom indicator. This makes keyboard navigation nearly impossible.

• Never remove focus styles without replacing them. Use :focus-visible to show focus rings for keyboard users without showing them on mouse click.
• Ensure focus indicators have sufficient contrast against their background. WCAG 2.2 (2.4.11) tightens this further with a minimum area requirement for focus indicators.

Understandable

Understandable criteria require that the operation of the interface be understandable. For ecommerce, this is primarily about form errors, labels and predictable behavior.

3.1.1 Language of Page (Level A)

The default human language of the page must be identified in code using the lang attribute on the <html> element. Screen readers use this to select the correct voice and pronunciation engine.

3.2.2 On Input (Level A)

Changing a form field must not automatically cause a context change unless the user has been advised in advance. Country selector dropdowns that automatically submit a currency change form on selection change are a common violation.

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.

• Checkout form validation errors must appear as text messages, not just red border states or alert icons without text.
• Error messages must be associated with their input using aria-describedby so screen readers announce the error when the user focuses the input.
• Credit card number format errors, address validation failures and promo code rejections all need descriptive text messages.

3.3.2 Labels or Instructions (Level A)

Labels or instructions must be provided when content requires user input. Every form field needs a visible, persistent label. Placeholder text is not a label: it disappears when the user starts typing.

• Shipping address forms, account creation forms and payment forms must have visible labels for every field.
• If fields have specific format requirements (phone number format, postal code format), state this before or within the field label, not only in an error message after submission.

3.3.3 Error Suggestion (Level AA)

If an input error is detected and suggestions for correction are known, provide the suggestion. "Invalid email address" is minimal. "Please enter an email address in the format name@example.com" is useful.

3.3.4 Error Prevention for Legal and Financial Transactions (Level AA)

For transactions that cause legal commitments or financial obligations (purchases), submissions must be reversible, checked for errors or confirmed before finalizing.

• Provide an order review step before final submission. Show the complete order: items, quantities, shipping address, payment method and total.
• Allow users to edit any part of the order before confirming.

Robust

Robust criteria require that content be interpreted reliably by a wide variety of user agents, including assistive technologies.

4.1.1 Parsing (Level A)

HTML must be valid. Duplicate IDs are the most common parsing failure in ecommerce: product cards with repeated IDs across a page grid, form inputs duplicated in mobile and desktop versions of the same page.

4.1.2 Name, Role, Value (Level A)

All user interface components must have an accessible name, an accessible role and their state must be programmatically determinable.

• Custom accordion filters must use role="button" or <button> with aria-expanded to communicate open and closed states.
• Custom checkbox filters must use role="checkbox" with aria-checked.
• Tabs in product detail pages (Description, Reviews, Shipping) must use the ARIA tabs pattern with role="tablist", role="tab" and role="tabpanel".
• Quantity steppers must announce their current value. A plus/minus button without a visible count is insufficient if the count is not announced on change.

4.1.3 Status Messages (Level AA)

Status messages must be programmatically determinable through role or properties so they can be announced to screen reader users without receiving focus.

• "Item added to cart" notifications must use role="status" or aria-live="polite" so screen reader users hear the confirmation without having to navigate to the cart.
• Search result counts ("24 results for blue sneakers") must be announced when results update.
• Form submission success messages must be announced automatically.
• Stock level alerts ("Only 3 left") that appear dynamically must use live regions.

Ecommerce-specific patterns to test

Several common ecommerce patterns require specific testing that goes beyond individual success criteria:

• Faceted filters. Filter panels that update product listings via AJAX must announce the updated result count, move focus appropriately and ensure all filter controls are keyboard accessible.
• Product variant selection. Selecting a color or size that changes the product image, price and availability must communicate all of those changes to assistive technology.
• Guest checkout vs account creation. Radio button or tab patterns that switch between checkout modes must handle focus management correctly.
• Third-party payment methods. PayPal, Apple Pay, Google Pay and buy-now-pay-later buttons injected by payment providers must be tested. Their accessibility is outside your direct control but is still your legal exposure.
• Post-purchase flows. Order confirmation pages, account registration prompts and loyalty program enrollment flows are frequently tested by plaintiff attorneys because they are part of the transaction.

How to use this checklist

Automated scanning tools catch approximately 30-40% of WCAG violations. See our accessibility testing tools comparison for which tools cover which criteria. For a step-by-step walkthrough of running a full audit against this checklist, see our guide on how to audit your store for accessibility. The rest require manual testing: keyboard-only navigation through your complete checkout flow, screen reader testing on product pages and form completion, and review of dynamic interactions like cart updates and filter changes.

Start with the highest-risk pages: checkout, cart, account creation and login. Fix critical and serious violations first. Then expand to product pages, search and filtering. Static content pages like About and Blog carry much lower legal risk than transactional flows.

The 96% WCAG failure rate across ecommerce sites means your competitors are almost certainly failing too. But that is not a defense in a lawsuit. Courts and regulators hold each store to the standard independently.

Frequently asked questions

How many WCAG 2.1 AA success criteria apply to ecommerce?

All 50 WCAG 2.1 AA success criteria apply to ecommerce sites. The highest-impact criteria for online stores are 1.1.1 (alt text), 1.4.3 (color contrast), 2.1.1 (keyboard accessibility), 3.3.1 (error identification) and 4.1.2 (name, role, value for custom components).

What percentage of ecommerce sites fail WCAG 2.1 AA?

96% of ecommerce sites have detectable WCAG failures according to the WebAIM Million study. The actual failure rate is likely higher because automated tools only catch 30-40% of violations. Interactive flows like checkout require manual testing to evaluate fully.

Which ecommerce pages should I test for WCAG compliance first?

Start with checkout, cart, account creation and login pages. These carry the highest legal risk and direct revenue impact. Then expand to product pages, search and filtering. Static content pages like About and Blog carry much lower legal risk than transactional flows.

What is the most common WCAG violation on ecommerce sites?

Missing alt text on product images (WCAG 1.1.1) is the single most cited violation in ADA complaints against ecommerce stores. Color contrast failures (WCAG 1.4.3) and missing form labels (WCAG 1.3.1) are the second and third most common.