E-commerce Accessibility: Product Cards, Filters, Checkout

Why This Matters (Conversion + SEO)

• Clear cards and easy-to-use filters reduce pogo-sticking and increase time on site.

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

• Predictable UI improves Core Web Vitals and supports better crawling & understanding.

Product Cards: Essentials That Sell

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

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

• Variant hints: display size/color availability without relying solely on color (use text/icons).

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

• 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 trapping and a labeled 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 Color: Blue”.

• Don’t rely solely on color 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 labeled 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 make them dismissible.

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

• Free-Delivery Thresholds: update amounts live with clear text, not solely by color.

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)

• Color-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 Unlabeled Divs → use radios with labels (e.g., “Size: M”).

• Cart Drawers That Close on Focus Loss → allow keyboard operation and close only with Esc 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 fixing structure and patterns, Adjustable enhances readability and comfort throughout the purchasing 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 installation, visible inclusivity—ideal for Marketing Managers and Website Owners driving conversions.

Try Adjustable

FAQs

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

What about out-of-stock and price changes?
Announce changes politely and visibly; don’t rely on color 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 keep adapting.

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