eCommerce Website Accessibility: What It Is, Why It Matters

By Carson McComas, CEO, Fuel Made

When ecommerce saw its major spike in early 2020, it seemed to finish the unmasking of many issues around accessibility and website ease-of-use, showing just how inaccessible most online stores are to people with disabilities.

This further proliferated U.S. lawsuits against inaccessible websites, apps, and digital videos rising by 64% in the first half of 2021 compared to the year before.

And sure enough, it scared a lot of ecommerce founders into thinking about website accessibility.

While no one wants to deal with a lawsuit, many founders also didn’t want to invest the time, money, and resources into redoing their website properly. Instead, they turned to accessibility widgets and overlays.

Here’s the problem: accessibility widget and overlay vendors do not protect you from lawsuits from the American Disabilities Act (ADA), nor do they actually make your website user-friendly for people with disabilities.

In fact, in the last six months of 2020, accessibility cases against companies using widgets and overlays were filed at a rate of one per day.

Now that we’re in 2022 and people are thinking about their strategies for the year, I’m suggesting online brands consider revamping their website to focus on well-designed user experiences—ones that are accessible to all shoppers, despite their capabilities.

Inaccessible ecommerce sites are limiting shoppers with disabilities from being able to use the site and make purchases. Yes, this impacts your bottom line and can cause a hefty lawsuit.

But lawsuits shouldn’t be the driver for website accessibility optimization; we should be focused on providing everyone equal access to ecommerce stores.

So what are the design best practices that ecommerce websites need to improve on? Here are a few common mistakes I see and how my team fixes them:

1. All graphics, images, and videos need alternative text to give users context. Anything on a web page that doesn’t have machine-readable content but is conveying information should have alt text. For graphics with charts and data, share a text alternative with the same information. For audio and videos, there should be both captions and text alternatives. Any images containing text require that text be included in the image’s alt description.
   
   
2. Videos and audio files should never auto-play when a user lands on a webpage. Web pages that auto-play video and audio can harm users who are at risk of having seizures. Also, it can be very distracting to users with certain cognitive disabilities like ADHD. For any media, there also needs to be a pause function that can be used by pressing the space bar on a keyboard.
   
   
3. Contrast levels must follow the Web Content Accessibility Guidelines (WCAG). Contrast measures the difference in brightness between two colors as a ratio ranging from 1:1 (white on white) to 21:1 (black on white). The WCAG then ranks your contrast as one of three levels: level A (lowest), level AA (mid-range), or level AAA (highest). An AA level is a passing ratio for contrast, but AAA is best for users with 20/80 vision who have contrast sensitivity and/or color deficiency. Contrast levels apply to all website elements.
   
   
4. Button size should always be a minimum of 42 pixels by 42 pixels. Studies say 42 by 42 pixels is the optimal button size for users. Also, don’t crowd your buttons with other noise. Use color and design elements in combination to indicate when a user is interacting with an element, such as when hovering over the button or focusing on it.
   
   
5. You need color and other elements to convey information. A lot of websites today will use only color to show when a user is interacting with an element, but there may be users who are color blind, and a color-only interactive element doesn’t tell them anything. As an example of how to convey information, text that is hyperlinked should be underlined in addition to the color changing when a user hovers over the text.
   
   
6. Users need space to scroll—both on desktop and mobile. Ever tried to scroll on your phone but you accidentally clicked a button that takes you off the page? It's frustrating. And this happens more often with users with motor control issues that are trying to navigate an inaccessible website. Leave enough blank space for users to be able to scroll on their mobile device without accidentally clicking an interactive element.

If you’re still debating whether or not website accessibility is worth it, take this into consideration:

Would an architect design a public building without ramps, elevators, and automatic doors?

Of course not, because it’s expected that they take accessibility into consideration—it’s the same way with websites.