Accessibility usually comes up for one of two reasons: a legal demand letter, or a genuine decision to serve every customer well. Either way, it’s far cheaper to build it into a redesign from the start than to retrofit it afterward.
At Knit Agency, accessibility isn’t a bolt-on service — it’s part of how we scope every Shopify Plus and BigCommerce build. Here’s the practical checklist we work from, based on WCAG 2.1 Level AA, the standard most commonly cited in ecommerce accessibility litigation and referenced by the ADA.
Why This Matters Beyond Compliance
- People with disabilities represent a meaningful share of online shoppers with real purchasing power that most stores are unintentionally locking out
- Accessible sites tend to have cleaner code, better semantic structure, and stronger SEO as a side effect
- Legal risk is real and growing — ecommerce is consistently among the most targeted industries for web accessibility lawsuits in the US
The Checklist
1. Color & Visual Contrast
- [ ] Text has a contrast ratio of at least 4.5:1 against its background (3:1 for large text)
- [ ] Sale prices, badges, and low-stock warnings don’t rely on color alone (add an icon or text label)
- [ ] Focus states are visible and high-contrast, not just a faint outline
2. Keyboard Navigation
- [ ] Every interactive element (menu, filter, size selector, cart drawer) is reachable and operable via keyboard alone
- [ ] Focus order follows a logical visual sequence, not the raw DOM order
- [ ] Modals and cart drawers trap focus correctly and can be closed with Escape
3. Images & Media
- [ ] All product images have descriptive alt text (not just the filename)
- [ ] Decorative images are marked so screen readers skip them
- [ ] Product videos have captions or a text alternative
4. Forms & Checkout
- [ ] Every form field has a properly associated label, not just placeholder text
- [ ] Error messages are announced to screen readers and describe exactly what to fix
- [ ] Required fields are marked in a way that isn’t color-only (e.g., an asterisk plus the word “required”)
5. Structure & Navigation
- [ ] Headings follow a logical hierarchy (H1 → H2 → H3) instead of being chosen for font size
- [ ] A “skip to content” link is available for keyboard and screen reader users
- [ ] Page titles are unique and descriptive across product, collection, and cart pages
6. Dynamic Content
- [ ] Cart updates, filter results, and stock changes are announced via ARIA live regions
- [ ] Loading states are communicated, not just visually implied by a spinner
- [ ] Pop-ups and cookie banners can be dismissed via keyboard and don’t trap focus
Common Ecommerce-Specific Pitfalls
| Pattern | The Problem | The Fix |
|---|---|---|
| Swatch-only color selection | Screen readers can’t identify the color | Add a text label alongside the swatch |
| Infinite scroll on collection pages | Keyboard/screen reader users lose their place and can’t reach the footer | Offer a “Load More” button as an alternative |
| Icon-only buttons (cart, search, wishlist) | No accessible name for screen readers | Add aria-label to every icon-only control |
| Countdown timers on sale banners | Content changes without warning for screen reader users | Use polite ARIA live regions, avoid aggressive auto-refresh |
How to Approach This in a Redesign
- Audit before you design, not after development — fixing structure and hierarchy is far cheaper at the wireframe stage
- Test with real assistive technology, not just automated scanners — tools like axe or WAVE catch maybe half of real-world issues
- Build accessibility into your design system (buttons, forms, modals) once, rather than fixing every instance individually
- Re-test after every major theme or app update — a single new app block can quietly break contrast or keyboard behavior across the whole store
Accessibility compliance isn’t a one-time checkbox — it’s a standard your store needs to hold as it evolves. Building it into your process from day one is significantly less expensive than retrofitting it later.
Related: