Ecommerce Accessibility Checklist: Page-by-Page Checks for Online Stores
A page-by-page ecommerce accessibility checklist based on WCAG 2.2: global elements, navigation, search, listings, product pages, cart, checkout and accounts.
Quick answer
Use this checklist page by page on your key journeys. Check global elements (skip link, landmarks, focus, contrast, zoom), navigation and search, listings and filters, product pages (images, galleries, variants, stock), cart and mini cart, checkout (labels, errors, time limits, authentication) and content (alt text, captions, real tables). Combine automated scans with keyboard, screen reader and zoom testing. The checklist follows WCAG 2.2 Level AA as a technical reference; it isn't a statement of legal compliance.
How to Use This Checklist
Run it on real journeys rather than isolated pages: find a product through navigation, find one through search, filter a category, choose a variant, add to cart, update the cart, check out as a guest, sign in and view an order. Record issues with the page, steps to reproduce, the WCAG criterion affected and severity. For background, see ecommerce accessibility and website accessibility guide.
| Tool | Use for |
|---|---|
| Automated checker (browser extension or CI) | First pass on each template |
| Keyboard only | Operability, focus order, traps |
| Screen reader (desktop and mobile) | Names, roles, states, announcements |
| Browser zoom to 200% and 400% | Resize and reflow |
| Contrast checker | Text, icons, focus indicators |
Global Elements
- Skip link to main content appears on focus and works
- Page has a unique, descriptive title
- Landmarks: header, nav, main, footer
- Headings form a logical outline (one H1 per page)
- Visible focus indicator on every interactive element
- Focus not hidden by sticky headers, cookie banners or chat widgets
- Text contrast at least 4.5:1 (3:1 for large text)
- Content reflows at 400% zoom without horizontal scrolling
- Language of the page set correctly
- No content that flashes more than three times per second
Navigation and Header
- Menus open and close by keyboard (Enter, Space, Escape)
- Submenus not dependent on hover alone
- Current page or section indicated
- Mobile menu button has an accessible name and expanded state
- Cart icon link includes item count in its accessible name
- Account and search icons have accessible names
- Help or contact link appears in a consistent place (WCAG 2.2 consistent help)
Search
- Search input has a label or accessible name
- Autocomplete follows the combobox pattern
- Suggestions navigable with arrow keys; Escape closes
- Number of suggestions or results announced
- Results page heading includes the query
- Zero-results state is announced and offers alternatives
Category Pages and Filters
- Filters use native controls or correct roles and states
- Applying a filter announces the updated results count
- Focus stays predictable after filtering
- Filter drawer on mobile is labelled, focus-trapped while open, closable
- Sort control labelled
- Product cards have one clear link with the product name
- Sale and original prices read clearly to screen readers
- Pagination or load more is keyboard operable and announced
Want a professional accessibility audit?
ZSpace tests ecommerce journeys against WCAG 2.2 AA and prioritizes fixes by impact on shoppers.
Product Pages
- Product images have meaningful alt text; decorative images are hidden
- Gallery and zoom controls keyboard operable and labelled
- Carousels can be paused and don't auto-advance unexpectedly
- Variant options have text names (not colour only) and selected state
- Unavailable variants announced as unavailable
- Price, stock and delivery changes announced after variant selection
- Quantity input labelled
- Add to cart confirms success in an announced message
- Size guide and other modals trap focus and return it on close
- Reviews and ratings readable (rating given as text, not only stars)
- Tabs and accordions operable by keyboard with correct states
Cart and Mini Cart
- Mini cart or drawer receives focus when opened and can be closed
- Quantity controls and remove buttons have accessible names including the product
- Updates to totals announced
- Discount code field labelled; errors described in text
- Checkout button clearly labelled
Checkout
- Every field has a visible label (not placeholder only)
- Required fields indicated before submission
- Errors described in text, linked to fields, announced
- Autocomplete attributes on name, address, email and phone fields
- No need to re-enter information already provided (WCAG 2.2 redundant entry)
- Time limits can be extended or avoided
- Payment fields and wallets operable by keyboard and screen reader
- Order summary accessible, including discounts and totals
- Confirmation page announces success and order number
- Custom checkout extensions tested to the same standard
Accounts and Login
- Login does not require a cognitive test such as a puzzle (WCAG 2.2 accessible authentication)
- Password managers and paste allowed
- CAPTCHA alternatives available where CAPTCHA is used
- One-time codes can be pasted
- Order history tables have headers
- Session timeout warnings allow extension
Content and Media
- Alt text written for product and content images
- Videos have captions; audio has transcripts
- Size charts are real tables with headers, not images
- Links describe their destination (no bare "click here")
- Product descriptions use headings and lists
- PDF guides have accessible alternatives
Third-Party Apps and Widgets
Test every app that renders in the storefront: reviews, chat, popups, recommendation carousels, loyalty widgets, cookie banners. Check keyboard access, focus handling, names and that they don't obscure focused content. Ask vendors for accessibility information and prefer those that can show testing results. See popups and CRO.
Prioritizing Fixes
Rank issues by how much they block tasks. A keyboard trap in checkout or an unlabelled payment field blocks purchases and is critical. Missing alt text on a key product image is high. Minor heading order issues are lower. Fix blockers on the purchase journey first, then high-impact issues on high-traffic templates, then the rest.
| Severity | Example | Timeline |
|---|---|---|
| Critical (blocks task) | Keyboard trap in checkout, unlabelled payment fields | Immediately |
| High | Colour-only variant swatches, silent add to cart | Next release |
| Medium | Low contrast on secondary text, unclear link text | Planned |
| Low | Minor heading order issues | Backlog |
Documentation and Statement
Keep audit results, fixes and dates. Publish an accessibility statement describing your target standard, known limitations, how to report problems and when it was reviewed; some laws specify required content, so check the rules for your markets. See ecommerce compliance.
WCAG 2.2 Additions Relevant to Ecommerce
WCAG 2.2 added several success criteria that matter in stores. Check these specifically, since older audits won't have covered them.
| Criterion (level) | Ecommerce example |
|---|---|
| Focus Not Obscured (Minimum) (AA) | Sticky headers, cookie banners or chat widgets must not fully hide focused elements |
| Dragging Movements (AA) | Price range sliders need a non-drag alternative |
| Target Size (Minimum) (AA) | Swatches, quantity buttons and close icons large or spaced enough |
| Consistent Help (A) | Contact or help link in the same place across pages |
| Redundant Entry (A) | Billing address can reuse shipping address |
| Accessible Authentication (Minimum) (AA) | No puzzle-only login; allow password managers and paste |
Screen Reader Test Script
A short, repeatable script makes screen reader testing consistent across releases. Run it on desktop and mobile.
- Open the homepage; navigate by headings and landmarks
- Open the main menu and reach a category
- Apply two filters and hear the results count update
- Open a product; hear name, price and stock
- Select a size and colour; hear the selection and any stock change
- Add to cart; hear confirmation
- Open the cart; change quantity; hear the new total
- Check out as guest; trigger an error; hear it described
- Complete a test order; hear the confirmation
Recording and Tracking Issues
Record each issue with the page, steps to reproduce, assistive technology used, WCAG criterion, severity, screenshot or recording and suggested fix. Track them in the same system as other bugs so they're prioritized alongside other work, and link fixes to re-tests. See ecommerce CRO audit for combining accessibility with broader audits.
Common Mistakes
- Checking pages in isolation rather than journeys
- Stopping at automated scores
- Testing only desktop
- Ignoring third-party widgets
- Treating a checklist pass as legal compliance
- No re-testing after releases
Ready to work through your store?
Talk to ZSpace about accessibility audits and design, accessible front-end fixes and Shopify theme remediation.
Conclusion
Run this checklist on real journeys, combine automated and manual testing, fix blockers on the purchase path first, and keep checking after every release. Related: accessible UI/UX design and checkout UX.
Common questions
Global elements, navigation, search, product listings and filters, product pages, cart, checkout, account and login, and content such as images, video and size charts, checked against WCAG criteria.