Caitlin de Rooij is a Web Accessibility Specialist. She works as an Accessibility Consultant for Level Level and provides training and workshops for enhancing digital accessibility. Caitlin’s expertise lies in ensuring that websites and digital content are designed and developed to be inclusive and usable for individuals with diverse abilities and disabilities.
Millions of people shop online every day, but many face unnecessary barriers that make it difficult or impossible to complete their purchases. The numbers tell a concerning story: according to a 2023 study by Level Level (creators of The A11Y Collective), more than half of the top online shops make it impossible for customers to place orders without using a mouse. This automatically excludes anyone who relies on keyboard navigation.
Making your online shop accessible means ensuring all customers can browse products, understand their options, and complete purchases independently. This includes people who use screen readers, those who navigate by keyboard, and shoppers who need clear, consistent layouts and instructions.
Beyond being the right thing to do, accessibility protects your business. The eCommerce sector has become a primary target for Americans with Disabilities Act (ADA) lawsuits, with settlements typically costing between $5,000 and $20,000.
In this guide, we’ll show you exactly how to make your online shop accessible. You’ll learn how to implement WCAG 2.2 standards, add technical solutions to your product pages and checkout process, set up testing methods, and maintain ongoing compliance. Let’s start by looking at what the law requires.
Legal requirements: ADA compliance standards for eCommerce
Many online retailers still don’t make their websites accessible to everyone, putting themselves at significant financial and legal risk. Let’s examine what the law requires and the practical implications.
The ADA was created to ensure equal access and prevent discrimination against people with disabilities. According to the Department of Justice’s stance on Title III of the ADA, websites must be accessible since they are considered “public accommodations.” This means your online shop needs to be usable by everyone, including people who:
- Use screen readers.
- Navigate by keyboard only.
- Need captions for video content.
- Have difficulty distinguishing colours.
- Use other assistive technologies.
The numbers highlight why this matters. The Click-Away Pound report found that between 2016-2019, lost business from inaccessible websites grew 37% to £17.1 billion. But it isn’t just a financial risk. In 2023 alone, 82% of ADA-related lawsuits targeted the eCommerce sector.
A prime example is the 2017 Mendizabal v. Nike case, where a person who is blind sued Nike because they couldn’t use the company’s website with a screen reader. The case led to a settlement and required Nike to make significant changes to their online presence.
And if you think this doesn’t apply to your business since you’re not based in the US or target an American audience, keep in mind that, starting June 2025, European eCommerce businesses will face additional requirements under the European Accessibility Act, with penalties ranging from fines to being blocked from the market.
WCAG (Web Content Accessibility Guidelines) standards
The primary technical standard for web accessibility is WCAG (Web Content Accessibility Guidelines) 2.2 Level AA. This covers four core principles:
- Perceivable – Information must be presentable in ways all users can perceive.
- Operable – Interface elements must be usable by everyone.
- Understandable – Information and interface operation must be clear.
- Robust – Content must work with various assistive technologies.
💡If you want to know the difference between A, AA, and AAA, check out our guide on WCAG’s A levels!
The best way to protect your business is to build accessibility into your development process from the start and regularly test your site with different assistive technologies. We offer a complete web accessibility checklist if you’d like to learn more about ADA compliance, but for now, let’s examine how to apply these standards to your product pages.
Choosing and optimizing your eCommerce platform for accessibility
Picking the right platform is your first step towards an accessible online shop. Recent WebAIM testing shows that most popular platforms still have significant accessibility issues – Shopify sites average 60.4 errors, WooCommerce 74.9, and Magento 86.6. However, by making smart choices and following best practices, you can create an inclusive shopping experience on any platform.
So, let’s go over the basics.
Accessible themes
Most themes are advertised as user-friendly, but to achieve real accessibility, you need to look for more specific features. These include:
- Proper heading structure and landmarks.
- Good colour contrast ratios in different sections.
- Clear keyboard navigation paths.
- No issues with typography scaling.
Keep in mind that there are no specific “accessible themes” – just themes with more or less accessible features. We recommend that you test them for yourself and only commit to one if it’s fully compatible with your existing setup and requirements.
Built-in features and limitations
Every major platform includes built-in features you should enable:
- Alt text management for product images.
- Semantic HTML structure.
- Form validation.
- Accessibility settings and preferences.
- ARIA landmark roles for navigation.
You’ll also need to address common platform limitations:
- Checkout pages often have restricted customisation options, so you might need plugins and extensions to include them.
- Product variations may lack proper screen reader announcements – test them manually to make sure that’s not the case.
- Cart updates might not be obvious to assistive technology users – this can be addressed with ARIA live regions.
- Form error messages frequently need clearer descriptions. For example, instead of just “Error”, the announcement should say “Missing first name.”
- Complex navigation menus usually require extra accessibility work – keep everything simple and test without a mouse.
Universal solutions and best practices
While each online shop has individual needs, there are some universal solutions you can implement right away to make using your website much easier for everyone. Here’s what you can do:
- Use quality automated testing tools regularly.
- Structure headings logically (H1 through H6).
- Verify keyboard navigation works properly.
- Include skip links to bypass repeated content.
- Keep layouts and navigation consistent across pages.
Remember these best practices:
- Don’t depend only on plugins and automated tools – test with real users.
- Check your site with screen readers monthly.
- Document known accessibility issues and planned fixes.
- Offer clear ways for users to report problems.
- Keep your accessibility statement current.
Now, let’s look at how to make two critical areas of your shop fully accessible: product discovery and the checkout process.
Essential compliance requirements for eCommerce websites
Online shops have unique areas on their websites that are essential to the business’s success. It can be unpleasant if someone can’t read a blog post or an article, but if someone can’t see product information, choose different options, or even go through checkout without issues, then you’re losing money.
So, let’s look at the eCommerce website elements that need special attention.
Making product discovery and pages accessible
Making your product listings accessible helps all shoppers find and understand your products. Here’s how to structure your pages for everyone:
Search and navigation
- Label your search box clearly (e.g., “Search products”).
- Make sure autocomplete suggestions work with keyboards.
- Display the number of results (e.g., “15 products found”).
- Announce search results to screen readers (e.g., “Showing 15 of 50 products”).
- Write helpful messages when searches find nothing.
- Create large enough click targets for all buttons.
- Test that users can navigate results with a keyboard.
Product listings
- Start each product page with a clear H1 title.
- Structure information logically using subheadings.
- Write detailed descriptions that explain all features.
- Check text contrast meets WCAG standards (4.5:1 ratio).
- Provide descriptive alt text for product images.
- Make image galleries work with keyboard controls.
- Show clear messages if required options aren’t selected.
Product options
- Add text labels to colour swatches (e.g., “Deep Navy Blue”).
- Ensure size selectors work without a mouse.
- Have screen readers announce selected options by using native input fields.
- Connect error messages to their specific fields.
- Display price and stock status prominently.
- Think about how screen reader users will hear the price, especially when there is a discount.
These improvements help everyone shop more easily – whether they use a screen reader, keyboard navigation, or just prefer clear, well-organised content. Let’s look at how to make your checkout process equally accessible.
Creating an accessible checkout process
Making your checkout process accessible is vital – if you remember some of the lawsuits from earlier, a lot of them were related to being able to complete a purchase online. Let’s examine how to make every step work for everyone:
Shopping cart
- Show cart contents clearly and make them easy to review.
- Provide clear feedback when items are added or removed.
- Make quantity adjusters work with keyboard controls.
- Announce cart updates to screen readers (e.g., “3 items in cart, total $75”).
Checkout flow
- Create a logical sequence of clearly labelled steps.
- Include progress indicators that screen readers can announce.
- Make all buttons and forms usable by keyboard.
- Properly label every field (e.g., “Delivery Address Line 1”).
- Connect error messages directly to their fields.
- Ensure proper tab order through each step.
Payment section
- Label all payment fields clearly (e.g., “16-digit card number”).
- If the site requires a security code or 3D authentication, ensure it’s easy to access and understand.
- Provide clear feedback for payment errors.
- Give ample time to complete forms before timing out.
- Present the order summary in a simple and logical structure.
- Enable autocomplete for faster form filling.
If you’re looking for inspiration on accessible eCommerce websites, look no further than Apple and BMW USA. These retailers allow their customers to order their products only with a screen reader and a keyboard and provide proper support when it’s needed.
Testing and maintaining ADA compliance: tools and techniques
Testing your online shop’s accessibility requires both automated tools and manual testing to catch all potential issues. Here’s how to implement a thorough testing strategy:
- Start by training your team on accessibility basics – everyone from designers to developers needs to understand what makes content accessible. If you’re not sure where to start, The A11Y Collective have courses for everyone:
- Accessible design, the basics – designers and web developers.
- Accessible code – web developers and programmers.
- Writing accessible content for the web – content writers and SEO specialists
- Set up a regular testing schedule:
- Run automated scans monthly across your entire site.
- Test critical paths manually every quarter.
- Always test after major updates before pushing live.
- Use automated tools as your first line of defence:
- Axe, WAVE, and Google Lighthouse help spot common issues.
- Check colour contrast with dedicated tools.
- Set up ongoing monitoring with Browserstack.
- Remember that automated tools only catch about 30% of issues.
- Manual testing is essential for finding contextual problems:
- Test all functions with keyboard navigation.
- Use screen readers like JAWS to verify content is understandable.
- Check that forms work logically and provide clear feedback.
- Verify all media has appropriate alternatives.
- Finally, get professional help in the form of accessibility audits:
- Schedule yearly third-party audits with experts such as The A11Y Collective.
- Test with people who have disabilities.
- Document all testing procedures.
- Create clear plans to fix any issues found.
This comprehensive approach helps ensure nothing slips through the cracks.
Start your journey to eCommerce accessibility with The A11Y Collective
Creating an accessible online shop will help you avoid legal issues and open your doors to every potential customer. By following accessibility best practices in product discovery, checkout flows, and testing, you can create an inclusive shopping experience that works for everyone.
While ADA compliance protects you legally, the benefits go much further. Accessible sites often rank better in search engines, reach more customers, and provide a smoother experience for all shoppers, whether they have disabilities or not.
To achieve this, you need to make accessibility part of your team’s DNA through ongoing training. The A11Y Collective offers specialised courses tailored to your role – whether you’re coding complex components, designing interfaces, or writing product descriptions. Our practical, self-paced training helps you master the skills needed for true accessibility.
Ready to start? Book an accessibility audit to understand exactly where your site stands and get a clear path forward.
Is your store ADA-compliant?
Book a professional audit to ensure your website meets accessibility standards and provides a smooth experience for all users.
