WCAG 2.1 Compliance Checklist for E-commerce Sites
E-commerce sites are the #1 target for ADA lawsuits. If someone can't complete a purchase because of accessibility issues, that's clear economic discrimination. Here's what to check on your online store.
Why e-commerce is targeted most
When a blind user can't buy from your store because images lack descriptions or checkout forms are broken, the harm is obvious. Lawyers love clear-cut cases.
Product Pages
Product images have descriptive alt text
Describe what's shown: "Red leather wallet, open view showing card slots"
Color swatches are labeled, not just colored
Screen readers can't see color. Add text labels or aria-labels.
Size selectors are keyboard accessible
Can you Tab to size options and select with Enter/Space?
"Add to Cart" button is clearly labeled
Avoid icons-only. Include text or aria-label.
Price and availability are programmatically associated
Screen readers should announce price when focused on product.
Shopping Cart
Cart icon shows item count accessibly
Use aria-label: "Shopping cart, 3 items" not just a badge.
Quantity inputs are labeled and keyboard usable
+/- buttons need labels. Input should accept typed numbers.
Remove buttons are labeled per-item
"Remove Blue T-Shirt from cart" not just "Remove"
Cart updates are announced to screen readers
Use aria-live regions for quantity changes and removals.
Checkout Flow
All form fields have visible labels
Placeholders disappear. Labels stay visible above inputs.
Form errors are announced and linked to fields
Use aria-describedby to connect error messages to inputs.
Address autocomplete is keyboard accessible
Arrow keys should navigate suggestions. Enter should select.
Payment form works without mouse
Test entire checkout with Tab/Enter only. Can you complete it?
Order confirmation is announced
Focus should move to confirmation. Page title should update.
Site-Wide Requirements
Text has 4.5:1 contrast ratio minimum
Check grays, placeholder text, and sale prices.
Navigation menu is keyboard accessible
Dropdowns should open with Enter, close with Escape.
Search is accessible
Results should be announced. Suggestions keyboard navigable.
Focus is always visible
Don't remove outlines. Make them obvious.
Modals trap focus correctly
Tab should cycle within modal. Escape should close.
Platform-Specific Notes
Shopify
Most Shopify themes have basic accessibility, but apps and customizations often break it. Test after installing any new app. Check your theme's accessibility settings.
WooCommerce
Heavily dependent on your WordPress theme. Many popular themes have poor accessibility. Use a WCAG-focused theme or audit your current one carefully.
Custom/Headless
You're responsible for everything. Use semantic HTML, ARIA where needed, and test with actual screen readers (NVDA is free for Windows).
Check your store's accessibility
Get a free accessibility scan in 30 seconds. See exactly what needs fixing.
Scan Your Site FreePriority Order for Fixes
- Checkout flow — If people can't buy, you're losing money and inviting lawsuits
- Product images — Alt text is the most commonly cited violation
- Forms and inputs — Labels and error handling
- Navigation — People need to find products
- Everything else — Color contrast, focus states, etc.
The Bottom Line
E-commerce accessibility isn't optional—it's a legal requirement and a business advantage. 15% of the world has a disability. If they can't shop on your site, you're leaving money on the table and putting a target on your back.
Start with a scan, fix the critical issues, then work through this checklist. Your future self (and your lawyer) will thank you.