← Back to Accessalyze

WCAG Compliance for E-Commerce Websites

Product Listing Pages

Product Images

Every product image must have descriptive alt text that a blind user can use to understand what's being sold:

<!-- BAD -->
<img src="product-123.jpg" alt="product">

<!-- GOOD -->
<img src="product-123.jpg" alt="Classic leather messenger bag in brown, 15-inch laptop compatible">

Product Cards With Links

When the entire card is a link, the link text must be descriptive:

<!-- BAD: "Shop Now" × 12 is meaningless to screen readers -->
<a href="/products/123">Shop Now</a>

<!-- GOOD -->
<a href="/products/123">Classic Leather Messenger Bag — $89</a>

<!-- GOOD: visually shows product name, with sr-only context for AT -->
<a href="/products/123" aria-label="View Classic Leather Messenger Bag, $89">
  Shop Now
</a>

Product Detail Pages

Color and Size Selectors

Color swatches that are only visual (colored squares with no text) are inaccessible:

<!-- BAD: color-only swatches -->
<button style="background: #8B4513;"></button>
<button style="background: #000000;"></button>

<!-- GOOD: ARIA label conveys color name -->
<button aria-label="Color: Brown" aria-pressed="true"
        style="background: #8B4513;">
  <span class="sr-only">Brown</span>
</button>

<!-- GOOD: Native radio buttons, styled -->
<input type="radio" id="color-brown" name="color" value="brown">
<label for="color-brown">Brown</label>

Quantity Inputs

<label for="qty">Quantity</label>
<input type="number"
       id="qty"
       name="qty"
       value="1"
       min="1"
       max="99"
       aria-label="Quantity">
<button aria-label="Decrease quantity">−</button>
<button aria-label="Increase quantity">+</button>

Add to Cart Feedback

When a user adds to cart, the update must be announced to screen readers:

<div role="status" aria-live="polite" id="cart-notification"></div>

<script>
function addToCart(product) {
  cart.add(product);
  document.getElementById('cart-notification').textContent =
    `${product.name} added to cart. ${cart.count} items in cart.`;
}
</script>

Product Filters

Faceted filters (category, price range, rating) are complex interactive components. Key requirements:

• All filter controls are keyboard accessible
• Applied filters are announced when results update
• The results count changes are announced via aria-live
• Filter state (checked/unchecked) uses proper checkbox or radio semantics

<fieldset>
  <legend>Filter by Category</legend>
  <label><input type="checkbox" name="category" value="bags"> Bags</label>
  <label><input type="checkbox" name="category" value="wallets"> Wallets</label>
</fieldset>

<!-- Announce result updates -->
<p role="status" id="results-count">24 products found</p>

Checkout Flow

The checkout flow is the most critical path to remediate. Common failures:

1. Billing/shipping form fields without labels
2. Credit card number fields with no autocomplete attributes
3. Payment errors not announced to screen readers
4. Multi-step checkout with no indication of current step to AT
5. CAPTCHA with no audio alternative

<!-- Multi-step checkout progress -->
<nav aria-label="Checkout progress">
  <ol>
    <li aria-current="step">Shipping</li>
    <li>Payment</li>
    <li>Review</li>
  </ol>
</nav>

<!-- Payment form with autocomplete -->
<label for="cc-name">Name on card</label>
<input id="cc-name" type="text" autocomplete="cc-name">

<label for="cc-number">Card number</label>
<input id="cc-number" type="text" autocomplete="cc-number"
       inputmode="numeric" pattern="[0-9\s]*">

<label for="cc-exp">Expiration date (MM/YY)</label>
<input id="cc-exp" type="text" autocomplete="cc-exp" placeholder="MM/YY">

<label for="cc-csc">Security code</label>
<input id="cc-csc" type="text" autocomplete="cc-csc">

Search Functionality

<search>
  <label for="product-search">Search products</label>
  <input type="search"
         id="product-search"
         role="combobox"
         aria-autocomplete="list"
         aria-expanded="false"
         aria-controls="search-suggestions"
         autocomplete="off">
  <ul id="search-suggestions" role="listbox" hidden>
    <!-- suggestions rendered here -->
  </ul>
  <button type="submit">Search</button>
</search>

← Back to Accessalyze · ← ADA Lawsuit Triggers