Accessibility in E-Commerce: Designing Inclusive Online Shopping Experiences

It’s undeniable: e-commerce is a crucial aspect of modern retail. By embracing e-commerce, brands have the potential to connect with a large, global audience that’s ready to purchase. However, many brands and retailers are limiting their reach by not creating equitable and accessible e-commerce experiences for people with disabilities—a market segment that controls more than $490 billion in discretionary spending in the U.S. alone. Neglecting digital accessibility can not only harm a brand’s reputation, but also pose legal risks that can negatively impact its bottom line. In this blog, we’ll discuss the importance of digital accessibility in e-commerce and what it means in practice, providing real-life examples from our experts in accessible e-commerce design.

A business-boosting imperative

Prioritizing accessibility in e-commerce will boost business. Not only does it open your products to a greater share of the market, but inclusive organizations also report 28% more revenue, 30% higher economic profit margins, and twice as much net income compared to less inclusive competitors. Additionally, a more accessible experience can result in better customer engagement, potentially leading to higher average order values and increased customer frequency. In fact, according to our Fifth Annual State of Digital Accessibility survey, a majority (91%) of retail professionals consider digital accessibility a competitive advantage, with 85% reporting improvements in customer acquisition and 81% noting improvements in customer retention. Over time, building an accessible brand earns more consumer trust and loyalty, which may also improve lifetime value metrics.

Ready to benchmark your digital accessibility efforts?

Get the report

A legal obligation

Embracing accessibility in e-commerce not only impacts profitability, it’s critical to avoiding legal risk. Because an e-commerce site can be considered a place of public accommodation as defined in the Americans with Disabilities Act (ADA), brands and retailers can become the target of an ADA demand letter or lawsuit for an inaccessible online shopping experience. And many do. Roughly 14,000 digital accessibility lawsuits were filed from 2017 through 2022 in U.S. federal courts, with more than 3,000 filed in 2022 alone. And e-commerce experiences are consistent targets.

This type of legal action can bring financial consequences including legal fees, staff time and labor, and the cost of a potential settlement. In some cases, brands may face civil statutory penalties under the ADA, ranging from $75,000 for the first violation to up to $150,000 for subsequent violations. And that’s not including the cost of compensatory damages an organization may have to cover if their suit is also being brought under parallel state human rights laws such as the New York Human Rights Laws.

It’s also important to note that, as e-commerce powers an increasingly global marketplace, many online retailers have legal obligations beyond the U.S. For example, the European Accessibility Act (EAA) requires those doing business in the European Union to make their digital products, services, and technologies, including e-commerce experiences, accessible to everyone. And brands have until June 2025 to comply with requirements or begin to face fines and penalties.

What does accessibility in e-commerce mean in practice?

From avoiding legal risk to broadening your share of the market, accessibility is critical to e-commerce success. But you might be wondering, what does it take to create accessible online shopping experiences? There is a framework to follow when designing and developing: the Web Content Accessibility Guidelines (WCAG)—a set of more than 80 criteria against which web experiences can be evaluated for accessibility. While it’s not a guarantee of compliance, WCAG has been referenced in ADA enforcement settlements by the U.S. Department of Justice and adopted into many global accessibility laws and standards, including the standards that the EAA will be using to enforce compliance (EN 301 549).

The WCAG criteria are organized by four key principles, often referred to by the acronym POUR. Below, we’ll provide some questions user experience (UX) and user interface (UI) designers can ask themselves to apply each key WCAG principle to their organization’s e-commerce experience.

Perceivable:

Are you providing appropriate alternative text for all non-decorative images so that users who are navigating with a screen reader have adequate context for each image?

In particular, pay attention to:

• Product images – if these are used as links instead of display-only images, alt text is not required, but rather meaningful link text.
• Images that contain text. It’s best to avoid these, but if they’re present in your experience, include the text in the image in the accompanying alt text.

Are you providing closed captioning and transcripts for audio and video content so it may be perceived and enjoyed by everyone?

Providing a version including audio description of action that’s only presented visually is also a WCAG recommendation. And designing videos to include sign language interpretation is another plus.

Does your e-commerce experience meet WCAG standards?

Get the checklist

Operable:

Is your website operable by a customer using a keyboard or alternate input device, rather than a mouse, to navigate?

In answering this question, designers tend to focus on the operability of “select” functionality, like buttons. But it’s also important to think about the ability to operate expansion functionality (i.e., accordions, menu items, chat bots, hamburger menus, date pickers, etc.), drag-and-drop functionality, and drawing or painting options without a mouse.

Are you providing users with many ways to navigate your site or platform, to allow maximum flexibility and efficiency?

For example, in e-commerce experiences, it’s common to use many headings on a page or screen. However, designers may want to add skip links for items like carousels and skip links to and from the filters on a category landing page. (For an example, tab through Publicis Sapient page). It’s also good practice to make sure the cart button and search bar are made landmarks (in addition to typical landmarks like the header, footer, and main menu) so shoppers can easily get to them at any time.

Understandable:

Are the headings on your page properly structured and nested, creating a logical flow that allows shoppers using a screen reader to understand the content on their screen?

For content to be understandable, headings should show the structure of a web page or application, like an essay outline. There should be a single heading one (<h1>) per page, reserved for the main heading, and headings two (<h2>) through six (<h6>) should follow a nested structure, decreasing in importance, programmatically. Note: Even though headings are structurally nested, they can be styled any way you want.

Are the forms users are required to complete clear and well-labeled?

This may mean:

• Identifying mandatory fields
• Properly labeling form elements and avoiding placeholder text
• Including instructions in a spot that makes sense for the design of the form
• Providing error messages in text that is specific, descriptive, and helpful

Robust:

If you’re not using native HTML components, have you ensured anything customer-facing you create meets the same accessibility requirements?

For example, each actionable element created should have clearly defined and differentiated states, and all states need to be accounted for. Depending on the element, that may include the following states:

• Default
• Hover
• Focus
• Selected
• Activated
• Open and closed
• Expanded and collapsed
• Clicked / Pressed
• Dragged
• Loading
• Inactive

Have you designed status messages so that people using assistive technologies are alerted to the message without their focus indicator moving to it?

In an e-commerce experience, this might include messages pertaining to:

• Search results like “5 results returned”
• Shopping cart updates like “Shopping cart, 5 items”
• Form success submissions like “Your form was successfully submitted”
• Loading icons like “Application busy”
• Snackbar messages like “Photo saved in wedding album”

Getting started: The e-commerce accessibility journey

Your e-commerce experiences are likely changing constantly, with new products being added, updates being applied, branding being refined, and functionality being enhanced all the time. In this state of flux, how do you ensure accessibility for a digital experience—or a whole portfolio of experiences?

The fundamental first step is understanding that it’s a journey, not a one-time box to check. Find out more in our guide, Digital Accessibility in E-Commerce. In it, we outline your organization’s six key steps for ensuring accessible, engaging, and impactful e-commerce experiences. We also recommend accessing our videos on designing accessible e-commerce templates and product displays for quick, actionable tips.

Ensure accessible, impactful e-commerce with six key steps

Get the guide

Trusted by the world’s leading retailers

Level Access supports iconic and innovative brands and retailers to ensure online shopping experiences that are accessible for everyone. If you want to safeguard your business’s reputation, improve business outcomes, and avoid legal risk, reach out to our team for a quick introductory conversation.