Website accessibility is something I have built a career around, and a good part of it has been spent sitting next to people who shop differently than most store owners imagine. For example, a retired teacher who navigates entirely by keyboard because a tremor makes a mouse useless. Similarly, a college student who listens to product pages at triple speed through a screen reader. Then there was a warehouse manager with color blindness who once told me he had “bought the wrong size of everything for a year” because a store showed stock levels in red and green dots.
None of these people are edge cases. In fact, they are customers with money, intent, and very little patience for a checkout that fights them. So when I run an audit for an online store, that is the frame I bring: website accessibility is not a legal chore bolted onto the end of a redesign or an ecommerce website development project. Instead, it is the difference between a sale and an abandoned cart.
This article is the website accessibility checklist I actually use with retail clients. Moreover, it is organized the way a shopper moves through a store, from landing on the home page to receiving the order confirmation, because that is where the problems live. Finally, every item maps back to the Web Content Accessibility Guidelines (WCAG) 2.2 at Level AA, which is the target most laws and courts now point to.
Why Website Accessibility Matters More for Ecommerce Than Almost Any Other Sector
First, let me start with the uncomfortable numbers, because store owners usually ask “is website accessibility really a problem?” before they ask “how do I fix it?”
Every year, WebAIM tests the home pages of the top one million websites. In February 2026, 95.9% of those home pages had detected WCAG 2 failures, up from 94.8% in 2025, which reversed six straight years of small improvements. In addition, the report counted an average of 56.1 errors per page, a 10.1% jump over 2025, while the average page grew to 1,437 elements, nearly double the 2019 figure.
That last point matters for retailers. After all, online stores are some of the heaviest pages on the web, which hurts both access and website speed optimization. Think of mega menus, carousels, quick view modals, filter panels, review widgets, chat bubbles, and loyalty popups. As a result, every one of those components becomes another place for a website accessibility barrier to hide.
The Legal Side of Website Accessibility for Retailers
Meanwhile, the legal exposure follows the same pattern. Plaintiffs filed 3,117 website accessibility lawsuits in US federal court in 2025, a 27% increase over 2024, and once state court filings are added, total digital accessibility suits passed 5,000 for the year. Furthermore, retail carries most of that weight: ecommerce accounted for nearly 70% of all ADA web lawsuits in 2025, and 35.8% of the top 500 ecommerce retailers received at least one suit that year.
However, this is not just a big brand problem. Most ecommerce defendants in 2025 were companies earning under $25 million in revenue, which puts small boutiques and local shops squarely in the line of fire.
Likewise, if you sell into Europe, there is a second layer of website accessibility obligations. The European Accessibility Act, Directive (EU) 2019/882, has been enforceable since June 28, 2025, and it harmonizes accessibility requirements across all 27 member states for ecommerce and other named services. It also applies to any business selling online to EU consumers no matter where the company is located, with an exemption for microenterprises that have fewer than 10 employees and under €2 million in revenue.
So yes, it is really a problem. Now, let’s fix it.
WCAG 2.2: The Website Accessibility Standard Behind This Checklist
WCAG is built on four principles: content must be perceivable, operable, understandable, and robust. In turn, each principle breaks down into testable success criteria at three levels, A, AA, and AAA. For a store, AA is the working website accessibility target.
Currently, WCAG 2.2 is the latest version. The criteria from 2.0 and 2.1 carry over essentially unchanged, with one exception: 4.1.1 Parsing is now obsolete and removed. On top of that, the update adds nine new success criteria, two at Level A, four at Level AA, and three at Level AAA. Notably, several of those new criteria land right in the middle of a typical checkout, which is why I call them out below.
One more thing before we start. Automated website accessibility scanners are useful, and I use them on every engagement. Even so, in my experience they catch roughly a third of the real issues on a store. For instance, they can tell you an image has no alt attribute. However, they cannot tell you that the alt text on your hero banner says “IMG_4471” or that your size selector traps a keyboard user forever. Therefore, the checklist below assumes you will test manually as well.
Stage 1: Website Accessibility for Landing and Navigation
This is where shoppers decide whether your store is worth their time. Moreover, for people using assistive technology, that decision happens fast. Good ecommerce website design starts here.
Skip Links, Page Titles, and Headings
1. Add a working “skip to main content” link.
It should be the first focusable element on every page and become visible when it receives focus. On a store with a 60 link mega menu, this single link therefore saves keyboard and screen reader users from tabbing through every category before they reach a product. (WCAG 2.4.1 Bypass Blocks)
2. Give every page a unique, descriptive title.
For example, “Products | Store” on every product page is useless when someone has five tabs open. Instead, use a pattern like “Merino Crew Sweater, Navy | Brand Name.” (2.4.2 Page Titled)
3. Use real headings in a logical order.
Start with one H1 per page, usually the product or category name. Then add H2s for sections like Description, Reviews, and Shipping. After all, screen reader users jump between headings the way sighted shoppers scan. Consequently, if your theme styles a paragraph to look like a heading, it is invisible to them. (1.3.1 Info and Relationships)
Menus, Carousels, and Search
4. Mark up navigation as navigation.
Use the nav element and label multiple nav regions (“Main,” “Footer,” “Breadcrumb”) so they can be told apart. Similarly, breadcrumbs should be an ordered list, with the current page marked using aria-current.
5. Make mega menus keyboard friendly.
In fact, this is one of the most common website accessibility failures I find. Menus that open only on mouse hover are completely closed to keyboard users. Instead, the menu should open with Enter or Space, close with Escape, and return focus to the trigger button when it closes. (2.1.1 Keyboard)
6. Tame your carousels.
Auto rotating hero sliders cause trouble for people with attention and vestibular disorders, as well as for anyone who reads slower than the slide timer. Therefore, if a carousel moves on its own for more than five seconds, it needs a visible pause control. Better yet, don’t autoplay at all. (2.2.2 Pause, Stop, Hide)
7. Keep search accessible.
The search field needs a real label, not just placeholder text that vanishes when someone starts typing. Also, if you show autocomplete suggestions, announce how many results appeared so screen reader users know something changed.
Stage 2: Website Accessibility on Category and Search Pages
Category pages are where I see stores lose the most people quietly. Nobody complains; instead, they just leave.
Product Cards and Images
8. Make product cards a single, sensible link.
I often find product cards where the image, the title, the price, and a “View” button are four separate links to the same page. As a result, a screen reader user hears the same destination four times per product, multiplied by 48 products per page. Instead, wrap the card in one link with the product name as its accessible name, and keep secondary actions like “Add to wishlist” as separate, clearly labeled buttons.
9. Write alt text that sells.
Product images need alt text that describes what a shopper would want to know, for example: “Navy merino crew neck sweater, ribbed cuffs, shown on model.” On the other hand, decorative background textures need empty alt (alt=””) so they are skipped. Missing image alt text showed up on 53.1% of homepages in the 2026 WebAIM Million. Unfortunately, on a store, that number is usually worse once you move past the home page. (1.1.1 Non text Content)
Color, Contrast, and Website Accessibility
10. Don’t rely on color alone.
Remember my warehouse manager and his red and green dots. For that reason, stock status, sale prices, and selected filters must have a text or icon cue in addition to color. Simply put, “In stock” written out beats a green circle every time. (1.4.1 Use of Color)
11. Check text contrast, especially on sale badges and gray microcopy.
Normal text needs a contrast ratio of at least 4.5:1 against its background, whereas large text needs 3:1. Typically, light gray “Free shipping over $50” text on white, pale pink sale tags, and white text on lifestyle photos are the usual offenders. In fact, low contrast text appeared on 83.9% of homepages in the 2026 report, averaging 34 instances per page. It is the single most common website accessibility failure on the web; fortunately, it is also the easiest to fix. (1.4.3 Contrast Minimum)
Filters, Loading, and Touch Targets
12. Build filters that announce their results.
When a shopper checks “Size: Medium,” the product grid updates. A sighted user sees it. However, a screen reader user hears nothing unless you use a live region to say something like “32 products found.” In addition, each filter checkbox needs a proper label, and filter groups should be wrapped in a fieldset with a legend. (4.1.3 Status Messages)
13. Handle “Load more” and infinite scroll carefully.
Infinite scroll makes your footer unreachable for keyboard users, which is where your returns policy and contact details live. By contrast, a “Load more” button is far kinder. Then, when it loads new products, move focus to the first new item so the user doesn’t have to start over.
14. Size your touch targets properly.
This is one of the new WCAG 2.2 requirements, and it overlaps heavily with good mobile ecommerce design. Specifically, pointer targets must be at least 24 by 24 CSS pixels, with some allowable exceptions. That said, a smaller target can still pass if it has enough spacing around it. Think of tiny color swatches, pagination numbers, and the little “x” on filter chips. Ultimately, anyone with a tremor, or anyone shopping on a phone in a moving car, will thank you. (2.5.8 Target Size Minimum)
Stage 3: Website Accessibility on the Product Detail Page
This page does the heaviest selling, so it deserves the most website accessibility care.
Variants, Galleries, and Dragging
15. Label every variant selector.
Size, color, and quantity controls need visible labels that are programmatically tied to the inputs. Likewise, custom swatch buttons should expose the color name (“Forest green”) rather than just a colored square, and the selected option should be announced as selected.
16. Make image galleries usable without a mouse.
Thumbnails must be focusable buttons. Additionally, zoom features that work only on hover need a keyboard alternative. If the gallery opens in a lightbox, focus must move into it, stay inside it while open, and then return to the triggering thumbnail when it closes.
17. Provide alternatives for dragging.
WCAG 2.2 introduced 2.5.7 Dragging Movements at Level AA. So if your 360 degree product spinner or before and after comparison slider only works by dragging, add buttons that do the same job. The same goes for price range sliders in your filters; in that case, give shoppers number inputs too.
Video, Size Guides, Cart Feedback, and Reviews
18. Caption and describe product videos.
Videos need accurate captions, not auto generated ones that turn “cashmere” into “cash mirror.” Furthermore, if the video shows important information that isn’t spoken, such as how a stroller folds, you need an audio description or a text transcript that covers it. Above all, never autoplay video with sound. (1.2.2 Captions, 1.2.5 Audio Description)
19. Make size guides readable.
Size charts are often uploaded as images. Unfortunately, a screen reader can’t read a picture of a table. Instead, build size charts as real HTML tables with header cells, so a user can hear “Medium, chest, 40 inches” rather than nothing at all.
20. Announce “Add to cart” success.
After someone presses Add to Cart, many stores silently update the cart icon count. Instead, use a live region or move focus to a cart confirmation panel so the action is confirmed. Otherwise, you get what I have seen many times: screen reader users adding the same item four times because nothing told them the first attempt worked.
21. Keep reviews navigable.
Star ratings drawn as five icon fonts read as nonsense to a screen reader. Therefore, provide text like “Rated 4.5 out of 5 stars, 212 reviews.” Also, if reviews come from a third party widget, test it. After all, you are responsible for the website accessibility your customers experience, even if someone else wrote the code.
Stage 4: Website Accessibility in Cart and Checkout
This is where money changes hands, and consequently it is where website accessibility failures cost you the most. Lawsuits frequently name checkout barriers specifically, because a blocked checkout is the clearest possible denial of service. For the conversion side of the same flow, see our guide to checkout page design.
Form Fields and Data Entry
22. Label every form field with a visible, persistent label.
Placeholder text is not a label. For one thing, it disappears on typing; for another, it often fails contrast and leaves people with memory or attention difficulties wondering what they were supposed to enter. (3.3.2 Labels or Instructions)
23. Use autocomplete attributes.
Mark fields with the correct autocomplete values, such as name, email, street address, postal code, and cc number. In this way, browsers and password managers can fill forms automatically, which helps users with motor and cognitive disabilities enormously. (1.3.5 Identify Input Purpose)
24. Don’t make people type the same thing twice.
WCAG 2.2 added 3.3.7 Redundant Entry at Level A. Thus, if a shopper already entered their shipping address, offer a “Billing address same as shipping” checkbox or prefill it. Similarly, asking for an email address twice “for confirmation” creates friction; there are better ways to catch typos.
25. Write error messages that actually help.
“Invalid input” in red text tells a shopper nothing. In contrast, a good error message identifies the field, explains the problem, and suggests a fix: “Postal code must be 5 digits. You entered 4.” Next, connect the message to its field so screen readers announce it, and move focus to the first error, or to an error summary at the top of the form, on submit. (3.3.1 Error Identification, 3.3.3 Error Suggestion)
Focus, Login, and Timeouts
26. Keep focus visible and unobstructed.
Every interactive element needs a clear focus indicator. Yet many themes remove the browser outline because a designer thought it looked messy, and never replace it. In addition, watch for sticky headers, cookie banners, and “Free shipping” bars that slide over the focused field. Indeed, WCAG 2.2 Focus Not Obscured (Minimum) requires that an item receiving keyboard focus remains at least partially visible. (2.4.7 Focus Visible, 2.4.11 Focus Not Obscured)
27. Make login and account creation accessible.
The new 3.3.8 Accessible Authentication (Minimum) criterion says you shouldn’t require a cognitive test, like remembering a password or solving a puzzle, unless there is an alternative or assistance. In practice, this means you should allow password managers to paste, support passkeys or email magic links where you can, and avoid image puzzle CAPTCHAs. Of course, guest checkout is the friendliest option of all.
28. Don’t time people out without warning.
If your cart or payment page expires, warn the user before it happens and let them extend the session with a simple action. After all, screen reader users and people who type slowly need more time, and losing a filled form is a quick way to lose a customer. (2.2.1 Timing Adjustable)
Payment, Help, and Confirmation
29. Test your payment iframe.
Hosted payment fields from your processor sit inside iframes. Some have excellent website accessibility; others do not. So tab through them, use a screen reader on them, and check that error states are announced. If your provider’s fields fail, raise it with them, because the shopper will blame you, not them. It is worth checking accessibility before you commit to any payment gateway integration.
30. Put help in the same place every time.
3.2.6 Consistent Help is new at Level A. In short, if you offer a chat button, phone number, or help link, keep it in the same relative position across pages. That way, shoppers who get stuck at checkout find help where they found it on the product page.
31. Make the order confirmation page clear.
The confirmation should have a proper heading such as “Order confirmed,” list the order number in text, and summarize items and total. Finally, focus should land at the top of the page so screen reader users hear the good news first.
Stage 5: Sitewide Website Accessibility Details
32. Fix your popups and modals.
Newsletter popups, age gates, and cookie banners are focus traps waiting to happen. Therefore, every modal needs a labeled close button, must close with Escape, should keep focus inside while open, and must return focus where it was. Otherwise, a popup that a keyboard user can’t close blocks the whole store.
33. Respect reduced motion preferences.
Use the prefers reduced motion media query to tone down parallax, zooming product shots, and animated transitions for people who have asked their operating system for less motion.
34. Support zoom and text resizing.
Your store should work at 200% zoom without content being cut off, and it should also reflow into a single column at 400% zoom without horizontal scrolling. In particular, sticky headers that eat half the screen at high zoom are a frequent problem. (1.4.4 Resize Text, 1.4.10 Reflow)
35. Publish a website accessibility statement.
Explain your target standard, known limitations, and how customers can report problems or get help ordering another way. Then actually answer those emails. Ultimately, a statement backed by a responsive team builds trust, whereas one that goes nowhere does the opposite.
Website Accessibility Overlays and “One Line of Code” Fixes
Almost every retail client asks me about website accessibility widgets, the toolbars that promise instant compliance by adding a script to your site. Admittedly, I understand the appeal. Nevertheless, I also have to be honest about what the data shows.
EcomBack’s mid year report found that in the first half of 2025, 22.6% of web accessibility lawsuits targeted sites that already had an accessibility tool installed. Simply put, these tools can’t rewrite your checkout logic, fix a mega menu that ignores the keyboard, or write meaningful alt text for 4,000 products. Worse still, some of them interfere with the assistive technology people already use.
For this reason, my advice is simple. Spend the money you would spend on an overlay subscription on fixing your theme templates instead. Because most stores reuse a handful of templates (home, category, product, cart, checkout), improving website accessibility in those templates fixes thousands of pages at once. This holds whether you are weighing Shopify vs WooCommerce, running a custom headless commerce front end, or still choosing the best ecommerce platform for your catalog. And if you are planning how to build an ecommerce website from scratch, building these templates accessibly from day one is far cheaper than retrofitting them later.
How I Recommend Testing Website Accessibility on Your Store
Fortunately, you don’t need an expensive lab to get started. Here is the website accessibility testing routine I teach in client workshops.
Automated and Keyboard Checks
First, run an automated scan with a free tool like WAVE or axe DevTools on your five core templates. Then fix the obvious items: contrast, alt text, and missing labels.
Next, unplug your mouse and try to buy something using only Tab, Shift+Tab, Enter, Space, the arrow keys, and Escape. Meanwhile, write down every moment you get stuck or lose track of where focus is.
Screen Readers, Zoom, and Real Users
After that, turn on a screen reader. VoiceOver is built into Mac and iPhone, NVDA is free on Windows, and TalkBack ships with Android. Try to find a product, choose a size, and reach the payment step. At first it will feel slow; that’s fine.
Then zoom to 200% and 400% in your browser and check that nothing is cut off or overlapping.
Also test on a real phone with large text turned on in the system settings. If your store runs as a progressive web app, test the installed version too, since it can behave differently from the browser tab.
Above all, hire disabled testers for your most important flows. In my experience, paid user testing with people who use assistive technology every day will teach you more about website accessibility in an afternoon than a month of scanning.
Finally, make it routine. Add accessibility checks to your design reviews and your release process, and rescan whenever you install a new app or plugin. Indeed, most regressions I find come from a newly added marketing tool, not the original build.
Where to Start With Website Accessibility if This Feels Overwhelming
If you read 35 checklist items and felt your stomach drop, here is my triage order for a typical store:
- This week: First, fix color contrast, add alt text to top selling products, restore visible focus outlines, and make sure every checkout field has a real label.
- This month: Next, make menus, filters, variant selectors, and modals fully keyboard operable, and add live region announcements for cart updates and filter results.
- This quarter: Finally, audit third party widgets and payment fields, add drag alternatives, review authentication, publish your website accessibility statement, and set up a recurring testing schedule.
In the end, website accessibility is never “done,” just as your merchandising or your SEO is never done. Still, each fix opens your store to customers who were turned away before. What’s more, in my experience the improvements almost always lift conversion for everyone. After all, clear labels, readable contrast, and forgiving forms are simply good retail.
Website Accessibility FAQs
What website accessibility level should an online store aim for?
Level AA under WCAG 2.2. That is because it is the level referenced by most courts, settlement agreements, and the harmonized European standard behind the EAA. For more detail, the W3C explains the differences between versions in its overview of what’s new in WCAG 2.2.
Does the ADA apply to websites that have no physical store?
Courts have ruled differently depending on the jurisdiction. However, online only retailers are sued regularly, and ecommerce makes up the largest share of website accessibility filings. Therefore, speak with a qualified attorney about your specific situation; in the meantime, the UsableNet midyear lawsuit report is a useful overview of current trends.
My store is outside the EU. Does the European Accessibility Act apply to me?
If you sell to consumers in the EU, it likely does, unless you qualify as a microenterprise. For a deeper look, Bird & Bird’s guide for online retailers walks through the scope in detail.
Will a website accessibility overlay make my store compliant?
No tool can make a store compliant on its own. In fact, overlays don’t fix underlying code problems, and stores using them still get sued, as the EcomBack mid year lawsuit report shows.
How often should I test my store for website accessibility?
Scan automatically after every theme update, app install, or major campaign launch. In addition, do a full manual review at least twice a year. As a starting point, WebAIM’s WAVE evaluation tool is free.
Which WCAG 2.2 criteria matter most for checkout?
Focus Not Obscured, Target Size, Redundant Entry, Accessible Authentication, and Consistent Help. Fortunately, Deque University’s WCAG 2.2 resources explain each one with examples.
References
- The WebAIM Million: 2026 Report on the Accessibility of the Top 1,000,000 Home Pages, WebAIM
- What’s New in WCAG 2.2, W3C Web Accessibility Initiative
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation
- WCAG 2.2 Resources and Code Examples, Deque University
- Deque Systems Welcomes and Announces Support for WCAG 2.2, Deque
- 2025 Midyear ADA Digital Accessibility Lawsuit Report, UsableNet
- Americans with Disabilities Act Statistics and Trends, Be Accessible
- 2025 Mid Year ADA Website Lawsuit Report, EcomBack
- A Guide to Navigating the European Accessibility Act for Online Retailers, Bird & Bird
- EAA Ecommerce Services Requirements Under the European Accessibility Act, Accessible.org
- Accessibility Lawsuits Rose by 37% in 2025: Why Small Businesses Can No Longer Ignore Their Websites, Fort Wayne Business Weekly