Visit Github

E-commerce Website Accessibility Checklist

By gosia.dziedzic · July 22, 2025

Nowadays accessibility is not just a legal requirement—it’s a business imperative. Over 1 billion people globally live with some form of disability. Any website that wants to be customer-centric must accommodate all users. Following the WCAG 2.2 (Web Content Accessibility Guidelines) ensures your site is usable, navigable, and inclusive, while also improving SEO and customer satisfaction.

Here’s a step-by-step checklist to help you develop a WCAG 2.2-compliant e-commerce website:

Set Up for Success

1) Use Semantic HTML

  • Use correct tags: <button>, <nav>, <main>, <section>, <article>, <form>, etc.
  • Avoid using <div> or <span> for clickable elements unless necessary and always add role/aria attributes.

2) Choose an Accessible Framework

  • If using a UI library or framework (e.g. React, Shopify, Magento), ensure it supports accessible components or allows for customization.
  • Avoid third-party themes that don’t follow accessibility standards.

Perceivable (WCAG Principle 1)

3) Alt Text for Images (1.1.1)

  • Add descriptive alt attributes to all <img> elements.
  • For decorative images, use alt="".

4) Text Alternatives for Icons and SVGs

  • Use aria-label or aria-hidden="true" for icon-only buttons.
  • Include accessible names for SVGs used as buttons or links.

5) Color Contrast (1.4.3 & 1.4.11)

  • Text must have at least 4.5:1 contrast with the background.
  • For large text (18pt+ or bold 14pt+): 3:1 is sufficient.
  • Use tools like WebAIM Contrast Checker.

6) Text Resize (1.4.4)

  • Ensure layout remains functional when users zoom up to 200%.

7) Avoid Using Color Alone (1.4.1)

  • Don’t rely on color to convey meaning (e.g., “fields in red are required”).

Operable (WCAG Principle 2)

8) Keyboard Navigation (2.1.1 & 2.1.2)

  • All interactive elements must be operable via keyboard (Tab, Enter, Space).
  • Focus state should be clearly visible and distinct.

9) Logical Tab Order (2.4.3)

  • Ensure focus moves in a logical sequence across the page.

10) Skip Navigation Link (2.4.1)

  • Add a “Skip to main content” link at the top of every page.
<a href="#main-content" class="sr-only focus:not-sr-only">Skip to main content</a>
<main id="main-content">...</main>

11) Page Titles & Headings (2.4.2 & 2.4.6)

  • Use descriptive <title> for each page.
  • Use headings (<h1>–<h6>) in a clear and hierarchical structure.

12) Label All Form Elements (1.3.1, 2.5.3)

  • Use <label for=""> or aria-label for all form inputs.
  • Group related options with <fieldset> and <legend>.

13) Touch Target Size (2.5.8 – NEW in WCAG 2.2)

  • Ensure interactive elements are at least 24×24px.

Understandable (WCAG Principle 3)

14) Use Clear Language (3.1.1)

  • Write content in simple, readable language.
  • Avoid jargon unless necessary.

15) Consistent Navigation (3.2.3)

  • Keep navigation structure consistent across pages.

16) Error Suggestions & Prevention (3.3.1 – 3.3.3)

  • Use inline validation.
  • Provide clear error messages and suggest fixes.
  • For checkout, offer review before submission.

Robust (WCAG Principle 4)

17) Valid HTML & ARIA (4.1.1)

  • Validate your site at W3C Validator.
  • Avoid redundant ARIA roles (e.g., don’t add role="button" to a native <button>).

18) Use ARIA Where Necessary (4.1.2)

  • Examples:
    • aria-expanded, aria-controls for toggles
    • aria-live="polite" for status messages or cart updates

19) Compatible with Assistive Technologies

  • Test with screen readers like:
    • VoiceOver (Mac)
    • NVDA (Windows)
    • JAWS (Windows)
    • Use ChromeVox or browser extensions to simulate accessibility tools.

Ecommerce-Specific checks

20) Product Pages

  • Ensure product variations (e.g., size, color) are selectable by keyboard.
  • Add accessible labels to price, availability, and options.

21) Add to Cart & Cart Notifications

  • Use aria-live to announce when an item is added.
<div aria-live="polite" class="sr-only">Product added to cart</div>

22) Checkout Forms

  • Clearly label each field and section.
  • Group billing and shipping fields with <fieldset>.

23) Error Recovery

  • Allow users to return to the cart if an error occurs during checkout.

How to test?

WCAG 2.2 compliance is not a one-time task—it’s a continuous commitment. By building with accessibility in mind, you’re not only avoiding legal risks but also creating a better experience for everyone.

Manual Testing Tools

  • axe DevTools
  • Lighthouse (Chrome DevTools)
  • WAVE by WebAIM

Automated Testing

  • Integrate with CI tools like Pa11y, Deque, or SiteImprove.
  • Remember: automated tools catch only 20–30% of issues. Manual testing is essential.

Tags:

#accessibility