WCAG 2.1 AA Checklist for E-Commerce Sites

Why E-Commerce Accessibility Matters

Online shops are among the most common targets of accessibility complaints in Europe. Under the European Accessibility Act, e-commerce platforms are explicitly covered. The directive references "services related to e-commerce" as a category that must meet accessibility requirements by June 28, 2025 — and enforcement has been ramping up since.

For web agencies, this creates both urgency and opportunity. Your e-commerce clients need accessibility audits, and they need them now. This checklist gives you a structured way to evaluate any online shop against WCAG 2.1 Level AA — the standard referenced by the EAA and most EU national transpositions.

Beyond compliance, accessible e-commerce sites convert better. Research consistently shows that fixing accessibility barriers improves usability for all customers — clearer navigation, better form validation, more readable product information. An accessibility audit is also a UX audit.

1. Perceivable

Information and user interface components must be presentable to users in ways they can perceive. For e-commerce, this principle is critical — customers need to see products, read specifications, and understand pricing.

1.1 Text Alternatives (SC 1.1.1)

• Product imagesmust have alt text that describes the product (e.g., "Navy blue wool overcoat, front view"), not just "product image" or the SKU number.
• Gallery images in carousels need distinct alt text for each view (front, back, detail, lifestyle).
• Decorative images (background patterns, separator lines) should have alt="" or be CSS backgrounds.
• Icon buttons (cart, wishlist, search) need accessible names via aria-label or visually hidden text.
• CAPTCHAs on checkout or account creation must provide an alternative (audio CAPTCHA, or preferably a non-CAPTCHA bot detection method).

1.2 Time-Based Media (SC 1.2.1–1.2.5)

• Product videos need captions. This includes demo videos, unboxing content, and video reviews.
• Audio descriptions are required at Level AA if the video conveys visual information not available in the audio track (e.g., showing product features without narrating them).

1.3 Adaptable (SC 1.3.1–1.3.5)

• Headings and structure — Product pages must use a logical heading hierarchy. The product name should typically be an h1, with sections like "Description," "Specifications," and "Reviews" as h2s.
• Form inputs must be programmatically associated with labels. Common failure: checkout forms using placeholder text instead of visible labels.
• Meaningful reading sequence — price, availability, and "add to cart" must appear in a logical order in the DOM, not just visually.
• Input purpose (SC 1.3.5) — checkout form fields should use autocomplete attributes (e.g., autocomplete="shipping street-address") to enable browser autofill and assistive technology recognition.

1.4 Distinguishable (SC 1.4.1–1.4.13)

• Color contrast— normal text needs a 4.5:1 ratio, large text 3:1. Common failures: light gray prices, low-contrast "sale" badges, placeholder text in forms.
• Color not sole indicator — if stock status uses green/red, also use text ("In stock" / "Out of stock"). Sale prices should not rely only on a red color change.
• Text resizing — the site must be usable at 200% zoom. Product grids should reflow rather than overflow or clip content.
• Reflow (SC 1.4.10) — at 320px CSS width, no horizontal scrolling. Many e-commerce sites fail this on product comparison tables and wide specification grids.
• Non-text contrast (SC 1.4.11) — UI components (buttons, inputs, icons) and meaningful graphics need 3:1 contrast. Common failure: light-bordered input fields on white backgrounds.
• Text spacing (SC 1.4.12) — content must remain readable and functional when users override letter spacing, word spacing, line height, and paragraph spacing.

2. Operable

Users must be able to operate the interface. This is where many e-commerce sites fail hardest — complex interactive patterns like mega-menus, product filters, carousels, and multi-step checkouts often exclude keyboard and assistive technology users.

2.1 Keyboard Accessible (SC 2.1.1–2.1.4)

• All functions keyboard-accessible — every action a mouse user can perform must be available via keyboard. Test: can you browse products, add to cart, adjust quantities, and complete checkout using only Tab, Enter, Space, and Arrow keys?
• No keyboard traps — modal dialogs (size guides, quick view, cookie consent) must allow users to escape. Focus should return to the trigger element when the modal closes.
• Product image carousels — Arrow keys should cycle images. Previous/Next controls must be focusable and labeled.
• Quantity selectors — custom +/- buttons must be keyboard-operable and expose their current value to assistive technology.

2.2 Enough Time (SC 2.2.1–2.2.2)

• Session timeouts — if the checkout session expires, warn users before it happens and allow them to extend the session. Users with disabilities may take significantly longer to complete forms.
• Auto-rotating carousels — hero banners and promotional sliders that auto-advance must have pause/stop controls. Better yet, don't auto-rotate.
• Flash sale countdown timers — if a timer controls when an action becomes unavailable, users must be able to extend it or the timer must be at least 20 hours.

2.4 Navigable (SC 2.4.1–2.4.10)

• Skip navigation link — essential for sites with mega-menus that contain dozens of links. Keyboard users should not have to tab through 50+ navigation links to reach main content.
• Page titles — each page must have a descriptive title. Product pages should include the product name. Category pages should include the category name.
• Focus visible (SC 2.4.7) — keyboard focus indicators must be visible on all interactive elements. Many e-commerce themes suppress the default outline with outline: none without providing a replacement.
• Link purpose— "Click here" and "Read more" links fail this criterion. Product listing links should indicate the product name. "Add to cart" buttons should clarify which product when read out of context (use aria-label).
• Multiple ways (SC 2.4.5) — at least two ways to find any page. E-commerce sites typically satisfy this with navigation + search + breadcrumbs.

2.5 Input Modalities (SC 2.5.1–2.5.4)

• Touch targets (SC 2.5.5, enhanced in 2.2) — interactive elements should be at least 24x24 CSS pixels with adequate spacing. Common failure: tiny size/color swatch buttons in product selectors.
• Motion-based input alternatives — if the site uses shake-to-undo or tilt gestures, a traditional UI control must be available as well.

3. Understandable

Users must be able to understand both the information and the operation of the interface. For e-commerce, this is especially important during checkout — form errors, unexpected changes, and confusing labels cause abandonment for all users, but they are absolute blockers for users with cognitive disabilities.

3.1 Readable (SC 3.1.1–3.1.2)

• Page language — the lang attribute on the <html> element must be set correctly. Multi-language stores must update this per locale.
• Language of parts (SC 3.1.2) — if product descriptions include text in another language, mark it with the appropriate lang attribute.

3.2 Predictable (SC 3.2.1–3.2.4)

• No unexpected changes — selecting a product variant (size, color) should not navigate to a new page or cause a major layout shift without warning.
• Consistent navigation — the main navigation should appear in the same order on every page. Common failure: different menu structures on marketing pages vs. the shop.
• Consistent identification — the cart icon, search, and account links should use consistent labels across the site.

3.3 Input Assistance (SC 3.3.1–3.3.4)

• Error identification — when a form field has an error, identify the field and describe the error in text. "Invalid input" is not sufficient — say "Please enter a valid email address."
• Labels or instructions — every form field needs a visible label. Required fields must be indicated (not just by color). Format hints should be provided ("DD/MM/YYYY" for date fields).
• Error suggestion (SC 3.3.3) — if you can detect what the error is, suggest a correction. If the postcode format is wrong, say which format is expected.
• Error prevention (SC 3.3.4) — for financial transactions (i.e., placing an order), allow users to review, confirm, and correct their input before final submission. Most checkout flows with an order summary page satisfy this.

4. Robust

Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.

4.1 Compatible (SC 4.1.1–4.1.3)

• Valid HTML — parsing errors in HTML can cause assistive technology to misinterpret the page. Validate critical pages (product, category, checkout).
• Name, Role, Value (SC 4.1.2) — custom components (dropdown selectors, tab panels, accordions, star ratings) must expose their name, role, state, and value via ARIA. A custom dropdown that looks like a <select> but is built with <div>s must use role="listbox", aria-expanded, etc.
• Status messages (SC 4.1.3) — when adding an item to the cart, show a status message that screen readers can announce without taking focus. Use role="status" or aria-live="polite".

E-Commerce Specific Patterns

Beyond the general WCAG criteria, certain patterns appear frequently in e-commerce and deserve special attention during an audit.

Product Filters and Faceted Search

• Filter controls must be keyboard-accessible, including price range sliders (provide a text input alternative), checkbox groups, and collapsible filter categories.
• When filters update the product list dynamically (AJAX), announce the update to screen readers: "12 products found" via a live region.
• Active filters should be clearly indicated (not just by color) and easy to remove.

Shopping Cart

• The cart should be structured as a data table with proper <th> headers for Product, Quantity, Price, and Subtotal columns.
• "Remove" buttons must indicate which product they remove (not just an X icon without a label).
• Quantity changes and removals should provide feedback accessible to screen readers.

Multi-Step Checkout

• Step indicators must convey the current step to screen readers (not just visually). Use aria-current="step" or equivalent.
• Page titles should reflect the current step: "Checkout - Shipping Address — StoreName".
• Payment forms embedded via iframes (Stripe, Adyen) must have accessible iframe titles and the embedded content itself must be accessible.

Cookie Consent and Overlays

• Cookie consent banners must be keyboard-accessible and not trap focus. The "Accept" and "Reject" buttons must meet contrast requirements.
• Many third-party cookie consent plugins fail accessibility checks. Test them as part of your audit.

Testing Workflow for Agencies

A thorough e-commerce accessibility audit combines automated scanning with manual testing. Here is a practical workflow:

Next Steps

This checklist gives you a framework for auditing any e-commerce site. For context on the legal requirements driving demand for these audits — particularly the European Accessibility Act and its June 2025 deadline — read our EAA Compliance Guide for Agencies.

If you want to see how your client's site performs right now, start with a free automated scan. You'll receive a prioritized list of issues to investigate further within 24 hours.