Accessibility Commerce

Accessibility for E-commerce

Overview

WCAG 2.1 Level AA compliance covers screen reader announcements for dynamic cart updates, keyboard navigation for interactive components (carousels, quantity steppers, modals), focus management, and color contrast requirements. Accessible stores reduce legal risk under ADA, AODA, and EAA, and typically convert better across all users.

When to Use This Skill

• When an accessibility audit reveals WCAG violations blocking legal compliance (ADA, AODA, EAA)
• When screen reader users report inability to complete purchases
• When keyboard-only users cannot navigate the checkout flow
• When automated tools (axe, WAVE) surface critical issues that need remediation
• When building a new storefront and baking in accessibility from the start

Core Instructions

Step 1: Determine the merchant's platform and choose the right approach

Step 2: Run an accessibility audit

Before making changes, identify what needs fixing:

1. Automated scan: Run axe DevTools browser extension on your homepage, product page, cart, and checkout 2. WAVE tool: Visit wave.webaim.org and scan your store URL 3. Keyboard test: Tab through your entire checkout without a mouse — every interactive element must be reachable and operable 4. Screen reader test: Test with VoiceOver (Mac/iOS) or NVDA (Windows/Firefox) — navigate your product listing and complete a purchase

Common issues found on most stores:

• Images without meaningful alt text
• Color-only indicators (e.g., red "out of stock" with no text)
• Form fields without labels
• Modals that don't trap focus or respond to Escape
• Add-to-cart buttons that don't announce success to screen readers

Step 3: Platform-specific fixes

---

Shopify

Theme-level fixes (no code required): 1. Go to Online Store → Themes → Customize 2. Set alt text on all images: Products → Media → Edit alt text 3. Under Theme settings → Typography, ensure font sizes are at least 16px for body text 4. Enable Skip to content link in Header settings (available in Dawn and most modern themes)

Liquid code fixes for custom themes:

Add ARIA live region for cart updates — edit your cart-notification.liquid or equivalent snippet:

<div aria-live="polite" aria-atomic="true" class="sr-only" id="cart-live-region">
  {{ cart.item_count }} items in cart
</div>

For color swatches in variant selectors, wrap in a <fieldset> with <legend>:

<fieldset>
  <legend>{{ option.name }}: <span>{{ selected_value }}</span></legend>
  {% for value in option.values %}
    <label class="swatch {% if forloop.first %}selected{% endif %}">
      <input type="radio" name="{{ option.name }}" value="{{ value }}"
             {% if value == selected_value %}checked{% endif %} />
      <span class="sr-only">{{ value }}</span>
      <span class="swatch-color" style="background-color: {{ value | downcase }}" aria-hidden="true"></span>
    </label>
  {% endfor %}
</fieldset>

App options:

• AccessiBe (Shopify App Store, ~$49/mo) — automated WCAG 2.1 AA overlay; adds screen reader adjustments and keyboard navigation without theme edits
• EqualWeb — similar overlay approach with a free tier

---

WooCommerce

Plugin-based fixes: 1. Install WP Accessibility (free, wordpress.org) — adds skip navigation links, ARIA landmarks, removes title attributes from links, and fixes form labels 2. Install Accessibility Suite for WooCommerce — adds ARIA labels to cart and checkout elements automatically

Theme-based fixes:

• Use Astra or Kadence theme — both have strong WCAG AA coverage built in
• In Appearance → Customize → Typography, set base font size to 16px minimum

Manual fixes for WooCommerce checkout fields — add to your child theme's functions.php:

// Associate checkout field labels with inputs
add_filter('woocommerce_checkout_fields', function($fields) {
    foreach ($fields as $fieldset => &$fieldset_fields) {
        foreach ($fieldset_fields as $key => &$field) {
            if (!isset($field['label'])) {
                $field['label'] = ucfirst(str_replace('_', ' ', $key));
            }
        }
    }
    return $fields;
});

---

BigCommerce

1. Start with Cornerstone theme — it has the best baseline accessibility of all BigCommerce themes 2. Go to Storefront → My Themes → Customize and enable the accessibility settings panel 3. For color contrast: in Theme Editor, set button background color with sufficient contrast against white text (minimum 4.5:1 ratio) 4. Install an accessibility app from the BigCommerce App Marketplace (search "accessibility") for overlay-style fixes

---

Custom / Headless

Implement these patterns in your React/Vue/Svelte components:

ARIA live region for cart updates:

// Place once at the app root; update message after add-to-cart
export function CartLiveRegion({ message }) {
  return (
    <div role="status" aria-live="polite" aria-atomic="true"
         style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>
      {message}
    </div>
  );
}

Accessible variant selector using radio inputs:

<fieldset>
  <legend>Color: <strong>{selectedColor}</strong></legend>
  {colors.map(color => (
    <label key={color.value} className={`swatch ${!color.available ? 'unavailable' : ''}`}>
      <input type="radio" name="color" value={color.value}
             checked={selectedColor === color.value}
             disabled={!color.available}
             onChange={() => onColorChange(color.value)}
             className="sr-only" />
      <span className="swatch-visual" style={{ background: color.hex }} aria-hidden="true" />
      <span className="sr-only">{color.label}{!color.available ? ' (out of stock)' : ''}</span>
    </label>
  ))}
</fieldset>

Focus management for modals — use native <dialog> which handles focus trapping automatically:

const dialogRef = useRef(null);
useEffect(() => {
  if (isOpen) dialogRef.current.showModal();
  else dialogRef.current.close();
}, [isOpen]);

return (
  <dialog ref={dialogRef} onClose={onClose}>
    {/* focus is automatically trapped inside <dialog> */}
    <button onClick={onClose} aria-label="Close">×</button>
    {children}
  </dialog>
);

Visible focus indicators (never remove outlines):

:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

Step 4: Validate and test

1. Re-run the axe scan after changes and verify critical and serious violations are resolved 2. Test keyboard navigation: Tab → all interactive elements reachable; Enter/Space → activates buttons; Escape → closes modals 3. Test with VoiceOver (Mac): Cmd + F5 to enable, navigate using Tab and arrow keys; verify cart updates are announced 4. Check color contrast with the WebAIM Contrast Checker — body text needs 4.5:1, large text 3:1

Best Practices

• Never remove focus outlines — only suppress them for mouse users with :focus:not(:focus-visible) so keyboard users retain visible focus
• Use semantic HTML first — <button> for actions, <a> for navigation, <table> for tabular data; ARIA attributes cannot fix non-semantic markup
• Test with a real screen reader — automated tools catch only 30-40% of real issues; NVDA+Firefox and VoiceOver+Safari are the most common combinations
• Make touch targets at least 44×44px — this also benefits motor-impaired mouse users
• Write descriptive button text — "Add to Cart" is fine; "Click here" is not; screen reader users navigate by button and link text
• Caption all product videos — use auto-captions as a starting point but verify accuracy for product names and pricing

Common Pitfalls

Related Skills

• @responsive-storefront
• @checkout-flow-optimization
• @mega-menu-builder
• @search-autocomplete

Screen Reader Support for a Shopping Cart Page

Problem/Feature Description

A mid-size online retailer has launched a React-based storefront and recently received complaints from blind and low-vision customers. When users add items to the cart or adjust quantities, their screen readers (NVDA, VoiceOver) announce nothing — shoppers have no way to confirm their cart was updated without tabbing to the cart icon and trying to read a number badge that announces as just "3" with no context. A third-party accessibility audit has marked the cart page as non-compliant and the company needs it fixed before an upcoming compliance review.

The existing cart page renders a list of line items, each with a name, price, and a quantity control (−/+ buttons and a number input). There is also a cart icon in the header that shows a count badge. Your task is to produce an accessible React implementation of this cart page that solves the screen reader announcement problems.

Output Specification

Produce a single self-contained file cart-accessible.jsx (or cart-accessible.tsx) that implements the accessible cart page. The file should include:

• A CartLiveRegion component (or equivalent) that announces cart state changes
• A QuantityStepper component for adjusting item quantities
• A CartPage component that wires them together, renders a list of at least two sample products, and shows a cart count badge in a header area
• All supporting CSS can be placed in an adjacent cart-accessible.css file or inline via a <style> block at the top of the JSX

The components do not need to connect to a real backend; use local React state. The final files should be ready for a developer to drop into a project and inspect.

Keyboard Navigation Overhaul for a React Storefront

Problem/Feature Description

A React e-commerce storefront uses client-side routing (React Router) and features a quick-view modal that pops up when shoppers click a product card. Keyboard and screen reader users have filed multiple support tickets: after clicking a navigation link the screen reader stays on the link they just activated instead of announcing the new page; and when the quick-view modal opens, pressing Tab escapes the modal and reaches content behind it, while Escape does nothing. A third complaint is that the CSS reset removed all browser focus outlines and no replacement was added, making keyboard navigation invisible.

You have been asked to produce the utility code and CSS that fixes all three issues and integrates them into the storefront. The store is built with React, so solutions should be React-compatible (hooks, refs, useEffect are all fine).

Output Specification

Produce the following files:

• lib/focusManagement.js — focus utility functions for route changes and modal focus trapping
• hooks/useFocusOnRouteChange.js — a React hook that calls the route-change focus utility (can use a dummy route parameter to simulate a route change trigger)
• Modal.jsx — a modal dialog component that uses the focus trap utility; it should accept isOpen, onClose, and children props; render at least two focusable elements inside (e.g. a heading, a close button, and a sample action button)
• global.css — global CSS that provides visible focus indicators for keyboard users while suppressing the ring for mouse users, including support for Windows High Contrast mode

The files do not need a running dev server — they should be static source files that demonstrate the patterns clearly and consistently.

Accessible Product Detail Page: Variant Selection and Checkout Form

Problem/Feature Description

A fashion retailer's development team has built a product detail page and a one-page checkout, but accessibility testers have flagged two major problem areas. First, the color and size selectors are implemented as <div> elements with click handlers — screen reader users cannot determine which color or size is selected, and out-of-stock options are visually greyed out but announced identically to available options. Second, the checkout form shows inline validation errors as floating tooltips that are never read aloud; a JAWS user reported completing the entire form incorrectly because no errors were ever announced.

The team also needs the price, sale price, and availability labels to meet WCAG AA color contrast requirements so the page passes automated audit tools.

Your task is to produce accessible React components that solve these two areas: a variant selector group and a checkout form field with inline error handling. The components should work standalone and reflect production-quality accessibility patterns.

Output Specification

Produce the following files:

• ColorSwatchGroup.jsx — an accessible color variant selector
• SizeSelector.jsx — an accessible size variant selector (can reuse the same pattern as color if appropriate)
• CheckoutField.jsx — a reusable form field component with accessible inline error display
• CheckoutForm.jsx — a sample checkout form that uses CheckoutField for at least three fields (name, email, card number) and demonstrates client-side validation with errors shown on submit
• styles.css — CSS for the above components including color values for price, sale price, and out-of-stock badge

Include sample data (hardcoded color and size options) so the components render without external dependencies.