E-commerce Accessibility

E-commerce has revolutionized how we shop, providing unparalleled convenience and access to products and services without ever stepping foot into a physical store. Think about how many things you have purchased online in the past 30 days. From clothes to household items, food, groceries, and more – you probably make e-commerce purchases without thinking twice about it.

But for people with disabilities – arguably the people who might most need access to the convenience of online shopping – e-commerce purchases can be incredibly difficult and result in nothing gained but frustration.

If you build e-commerce websites for clients, it is essential to prioritize accessibility for all users as part of those builds.

Why Accessibility Matters in E-Commerce

Ensuring the e-commerce websites you build are accessible is ethically the right thing to do. E-commerce sites are one of the ways people get access to goods and services they need to live a healthy and enjoyable life. Accessible e-commerce is a matter of equal access.

However, ensuring e-commerce websites are inclusive and user-friendly for individuals with diverse abilities is not just a moral imperative; it’s also a strategic business decision.

Accessible e-commerce websites typically have better SEO and conversion rates than non-accessible competitors. These are the two examples of the benefits of accessibility. E-commerce businesses should also care about website accessibility because they are most likely to receive an accessibility complaint or be sued for not being accessible.

In their 2023 midyear report on web accessibility lawsuits, UseableNet found that 84% of the web accessibility lawsuits in the U.S. this year have been filed against e-commerce businesses. Since UsableNet began tracking digital accessibility lawsuits in 2018, e-commerce businesses have received more suits than other industries.

Testing E-Commerce Accessibility

When you’re building e-commerce websites, there are three things you should always do to test for accessibility:

1. Run an automated testing tool like Equalize Digital Accessibility Checker to find problems that can be found automatically and in bulk.
2. Manually test the front end of the website and ensure that you can search, view products, add products to the cart, and checkout using your keyboard only.
3. Turn on a screen reader and repeat manual testing, this time listening for anything that sounds confusing or changes in content or status messages that aren’t announced by the screen reader.

Essentially, you want to ensure that sight and a mouse are not required to perform the primary functions of the website. There are more detailed instructions on manual accessibility testing available in the Accessibility Checker documentation.

Things to Watch Out For

Unfortunately, many popular WooCommerce add-on plugins add a lot of accessibility problems to websites. Here are the top places in which you should check for accessibility issues on e-commerce websites:

• Popups: From email opt-ins to cookie notices, many popup plugins just don’t get this right. Learn more about popup accessibility here.
• Mega menus: Most mega menu plugins don’t function properly for keyboard users. Max Mega Menu is the one that gets the closest, but you’ll want to test it or any other nav menus for accessibility.
• Search and filter: Most auto-suggest search plugins are not keyboard accessible or announced to screen reader users. If you can avoid it, don’t use these; if the client really wants auto-suggest on search, Relevanssi Live Ajax Search works best. If you’re allowing users to filter products with Ajax, special considerations must be made. Read about accessible search and filter.
• Side or floating carts: Any elements that float over the site can be problematic for low-vision users who zoom in. Rather than having a floating cart icon that is always visible, fix it into the header and footer. If you use a plugin that opens a cart on the side of the website in lieu of the cart page, it needs to follow all the rules for accessible popups (see previous link).
• Sliders: Many e-commerce websites use sliders to showcase products or promotions. However, slider plugins can be problematic for accessibility if they lack proper keyboard navigation or screen reader support, or if they automatically advance without user control. Ensure any sliders are accessible, allowing users to pause or navigate through content easily. Or, better yet, remove sliders entirely from the design.
• Inadequate product and image descriptions: If the site does not provide comprehensive and well-structured product descriptions or alternative text for product images, users who rely on screen readers may not get the information they need about products. Ensure product descriptions are thorough and properly formatted (using correct HTML for any tables), all product images have alternative text, and images of text are not relied on to communicate important product information.
• Alternative checkout flows: If you’re using WooCommerce or EDD for checkout, the site’s checkout should be generally accessible. However, if you start adding alternative or customized checkout screens, you could add problems that make it difficult for assistive technology users to complete the checkout. If you’ve added any plugins to modify your checkout screen, make sure to test it thoroughly for accessibility, ensuring that all fields are labeled and other form accessibility best practices are followed.

Additional Resources

Want to learn more about e-commerce accessibility? Check out this WordPress Accessibility Meetup presentation on WooCommerce and Accessibility from TAB member, Bet Hannon.