E-commerce Accessibility: Product Cards, Filters, Checkout

Why this matters (conversion + SEO)

• Clear cards and usable filters reduce pogo-sticking and increase time on site.

• Accessible checkout (labels, errors, keyboard) cuts drop-off.

• Predictable UI helps Core Web Vitals and supports better crawl & comprehension.

Product cards: essentials that sell

• Image: provide useful alt (variant/angle/colour); use alt="" if decorative thumbnails.

• Name & price: live text, not embedded in images.

• Variant hints: show size/colour availability without relying on colour alone (use text/icons).

• Badges: “Sale”, “New”, “Low stock” must be text-accessible; don’t rely on colour only.

• Add to cart: use a real <button> with visible focus and clear state (Added/Disabled).

• Quick view: if used, it’s a dialog with focus trap and labelled title.

Card HTML sketch (simplified)

<article class="product-card">
  <a href="/product/trail-runner" class="product-link">
    <img src="shoe.jpg" alt="Men’s trail runner in charcoal" loading="lazy">
    <h3>Trail Runner</h3>
  </a>
  <p class="price">£89</p>
  <p class="stock" aria-live="polite">In stock</p>
  <button type="button" aria-label="Add Trail Runner to cart">Add to cart</button>
</article>

Filters & sorting: findability without frustration

• Controls are form elements (checkboxes, radios, selects) with labels.

• Announce results changes via a polite live region: “24 items, filtered by Colour: Blue”.

• Don’t rely on colour to indicate selected filters; add text/shape and visible state.

• Show ‘Clear filters’ as a button with an accessible name.

• Keyboard flow: Tab through filter groups in order; Space/Enter toggles.

• Defer live updates until users stop interacting or offer an explicit Apply button.

Live region example

<div aria-live="polite" id="results-status" class="sr-only"></div>
<script>
  function announce(status) {
    document.getElementById('results-status').textContent = status;
  }
  // After filtering:
  announce('24 items, filtered by Colour: Blue and Size: M');
<

Add to cart, quantities, and feedback

• Buttons, not spans. Use <button> for add/remove; <input type="number"> or labelled controls for quantities.

• Announce cart updates: “Added Trail Runner, size 9, quantity 1”.

• Disable vs hidden: disabled buttons should still be perceivable (explain why).

• Mini-cart drawer: treat as a dialog; trap focus; return it to the trigger on close.

Checkout forms: labels, errors, validation

• Labels: visible <label for> on every field; avoid placeholder-only.

• Address & payment: use autocomplete attributes (address-line1, postal-code, cc-number).

• Validation: on blur + submit; never per keystroke.

• Errors: specific, polite, and linked to fields; focus moves to the first error.

• Order summary: plain text costs; avoid image-only totals.

• Auth / guest checkout: don’t force memory tests; allow paste into fields (cards, OTP codes).

Promotions, timers, and announcements

• Banners: announce with a polite live region and keep dismissible.

• Timers/urgency: provide a pause or disable if it harms usability.

• Free-delivery thresholds: update amounts live with clear text, not colour alone.

Testing storefront flows (script)

1. Keyboard path: homepage → category → filter → product → add to cart → mini-cart → checkout → submit empty → fix errors → place test order.

2. Focus visibility: always see where you are; no traps in modals/menus.

3. Screen reader skim: headings outline, product card content, filter labels, cart updates, error messages.

4. Mobile check: target sizes, zoom, sticky bars don’t hide focused inputs.

Common pitfalls (and fast fixes)

• Colour-only sale price → add “Sale” text and ensure price contrast.

• Infinite scroll without landmarks → provide Load more button or announce additions.

• SVG icons without labels → add aria-label or visible text.

• Variant pickers as unlabelled divs → use radios with labels (e.g., “Size: M”).

• Cart drawers that close on focus loss → allow keyboard operation and Esc close only when intended.

Copy-paste checklist (Markdown)

Product cards
- [ ] Image alt describes product/variant; decorative thumbs use alt=""
- [ ] Name & price are live text; badges have text and meet contrast
- [ ] Add-to-cart is a <button>

Quick snippets

Variant radios (sizes)

<fieldset aria-labelledby="size-label">
  <legend id="size-label">Size</legend>
  <label><input type="radio" name="size" value="M"> M</label>
  <label><input type="radio" name="size" value="L"> L</label>
  <label><input type="radio" name="size" value="XL"> XL</label>
</fieldset>

Add-to-cart announcement

<div aria-live="polite" class="sr-only" id="cart-announce"></div>
<script>
function announceAdd(name, variant, qty) {
  document.getElementById('cart-announce')
    .textContent = `Added ${name}, ${variant}, quantity ${qty}`;
}
</script>

How Adjustable helps

After you fix structure and patterns, Adjustable boosts readability and comfort across the buying journey:

• Contrast and text-size controls make product details and forms easier to read.

• Motion preferences and reading aids reduce fatigue during long sessions.

• Fast install, visible inclusivity—ideal for Marketing Managers and Website Owners driving conversions.

Try Adjustable

FAQs

How do I make product filters accessible?
Use labelled form controls, announce result counts, and provide a clear “Reset”. Avoid colour-only states.

What about out-of-stock and price changes?
Announce changes politely and visibly; don’t rely on colour alone. Provide text like “Out of stock” and disable appropriately with context.

Do third-party apps break accessibility?
Often. Test after each app install/update, and add accessible wrappers (labels, roles, focus management) where needed.

Next steps

• Audit one category page and checkout with the checklist above.

• Fix the highest-impact issues (labels, focus, announcements, error handling).

• Add Adjustable to support diverse shoppers while you iterate.

• Read next: Accessible Forms, 20 Quick Accessibility Wins, Color Contrast Accessibility.