6 Common eCommerce Website Accessibility Mistakes & How to Fix Them

E-commerce website accessibility is often overlooked by brands when designing customer experiences.

But, when it’s done well, it can save you thousands of customers and sales you otherwise could have missed. 

As an eCommerce digital marketing agency, we’ve worked with many online stores over the years — and, along the way, spotted some extremely common accessibility issues on these brands’ websites.

In this blog, we’ll list a few of them (plus solutions to fix them!) to help your website improve its accessibility strategy and reach a brand-new audience of shoppers. 

What does eCommerce accessibility mean?

First, let’s get on the same page about what “online accessibility” really means.

“Accessible” means that any website, app, or other online platform can be used by everyone, regardless of their physical or mental abilities. 

It’s not just about making sure the site works well on most platforms; it’s also about making sure that users can understand what is on the page and interact with the site in an intuitive way.

Because this field encompasses so much, the Web Content Accessibility Guidelines (WCAG) exist to outline the specific standards that make websites accessible to people with disabilities. These guidelines are organized into 12 principles, which define the minimum requirements for making web content accessible and user-friendly. 

The WCAG provides insightful guidance on assessing each page of a website — not just for accessibility, but also for user experience (UX), which is equally crucial for search engine optimization (SEO) and conversion rate optimization (CRO).

Any sites that fail to meet these standards may be deemed discriminatory by the law — and could be subject to fines and other penalties, as detailed by the Americans with Disabilities Act (ADA). 

Therefore, if your site doesn’t meet eCommerce accessibility standards, it may only be a matter of time before you’re in a world of legal trouble.

6 eCommerce accessibility mistakes to watch out for

So, if you want to make sure your eCommerce website is accessible, where do you start?

Accessibility is an ongoing effort, not just a one-time checklist. It’s a strategy that you’ll need to revisit often to keep up with modern advancements and technologies.

However, when it comes to the basics, we recommend reviewing your site for the following errors.

1. Relying solely on an accessibility plugin

Using an eCommerce accessibility plugin is a great first step to making your site more accessible, but it’s not the only one you should take. 

Every site is different, and accessibility is a continually evolving standard. For instance, the WCAG has been updated two times since its initial release in 2008 and will likely be updated again as new technologies emerge. Additionally, plugins aren’t enough to comply with the ADA.

But that doesn’t mean they’re not a helpful place to start!

Some plugins incorporate widgets that give users the option to change visual aspects on webpages, such as fonts, spacing, colors, contrast, and alignment — all of which can help visually challenged individuals read website content.

That said, these plugins simply can’t cover everything your eCommerce site needs to be truly accessible. To achieve ADA compliance, you’ll also need to support keyboard navigation, optimize for screen readers, correctly tag images, and include form labels.

We highly recommend investing in a manual, human-led accessibility audit. This will provide the most comprehensive overview of your current accessibility status (and reveal mistakes common plugins won’t catch).

Auditing can be difficult, especially for websites that have hundreds of pages of content. Fortunately, you can hire an expert to do it all for you. 

Consider the following accessibility audit testing services to get started:

2. Forgetting to use alt text

Alt text describes an image for screen readers and appears in an image’s place if it doesn’t load. Therefore, it’s critically important for helping people with visual impairments understand what’s on your site. 

Imagine you’re trying to read an article online, but all the words have been replaced with random letters like “ahsdadsda121672.jpg,” so you can’t make out what it says. That’s what happens when someone who’s visually impaired visits your site without proper alt text.

Alt text also helps search engines understand exactly what each image on your site represents. If you don’t include alt text for all your images, search engines may not be able to index them correctly, which could hurt your SEO efforts.

When you run an eCommerce website, you have a lot of images — product images, promotional displays, and more. This means alt text should be the highest priority for your web developers.

You can use certain plugins to identify any existing (and missing) alt text on your site. Then, use the following resources to add alt text where necessary using proper best practices:

3. Choosing irrelevant anchor text

Anchor text refers to the text shown as a clickable link on a webpage or in an online document. It’s the copy that tells screen readers and search engines what the destination page is about, so that when someone clicks on your link, they land on a page that’s relevant to them. 

Many websites, however, are unaware of how anchor text can affect their users. Instead, they frequently link to pages using “click here” as their anchor text — which can be incredibly confusing for those using screenreaders.

With no specific context for anchor copy, users are left to wonder where exactly a hyperlink is going to send them.

Fortunately, by using relevant anchor text, you can create a more positive user experience on your eCommerce site and improve your SEO efforts.

Let’s take this blog post as an example. If we want to direct readers to more eCommerce accessibility mistakes from an external resource, we’ll use that anchor text: “eCommerce accessibility mistakes.”

In contrast, generic wording (such as “click here”) will make it harder for our readers (and Google’s search bots) to understand the purpose of the link.

Be specific with your anchor text, and your customers will thank you for it.

4. Using illogical page structure

A well-structured eCommerce site is one that follows the natural order of things. We’re not talking about your site architecture here; we’re referring to the structure of each individual webpage. 

To make sure your pages are accessible and easy to read, you need to use headings. When used properly, these provide structure and context for the content you’ve included on each page.

Heading tags (H1, H2, etc.) help organize your webpage content into a logical hierarchy. The first and most significant of these is H1, which serves as the page title. 

From there, you can use H2 (and subheadings like H3, H4, etc.) to section out your page content. However, your headings must always follow a logical order; you cannot jump from an H2 to an H5 without confusing screenreaders (and users).

A web developer can help you identify any inconsistencies in your existing headings and subheadings. You should also create outlines for any future content with these headings in place, so you can ensure any new web pages are logically organized.

5. Omitting tab navigability

Most web users navigate websites using a computer mouse. But, for others, this is impossible.

People who are blind or who have low vision may not be able to see a mouse at all. Similarly, those with motor impairments may be unable to use a mouse due to their physical limitations.

Instead, these individuals will use their keyboard’s “tab” button to navigate the web.

If your eCommerce site doesn’t include tab-navigable links to help your customers move around your site, these customers won’t be able to browse, select products, or complete their purchases online.

To ensure a keyboard-accessible website, you’ll need to work with your web developer to:

• Implement visible keyboard focus
• Correct tab order
• Eliminate keyboard traps

Keyboard focus

Keyboard focus allows the user to see where they are in relation to the page’s structure. Website elements with this focus can be triggered or modified with the keyboard. 

Most web browsers automatically provide a focus indicator that shows a border around the item. However, your developer should also implement and modify this feature on your website to make it more obvious.

Tab order

Tab order is the order in which a user can navigate through items by hitting the tab key. 

Proper tab order should be intuitive and match the webpage’s structure, following the way a human would naturally browse the website — left to right, top to bottom.

Eliminating keyboard traps

A keyboard trap occurs when a user is unable to get away from an interactive element on a website by using just the keyboard. 

Elements like dialogue boxes or calendar widgets often contain keyboard traps where users are unable to close them after hitting “tab” or “ESC.”

6. Using improper color contrast

Color contrast is a critical aspect of online accessibility and helps your customers better view your website content.

While certain color combinations can be aesthetically pleasing, they can also make it difficult for anyone with visual impairments to browse your website. People with low vision may have a hard time distinguishing certain colors or perceiving differences between shades of color. 

This is where color contrast comes in.

Contrast is the difference between two colors in terms of their brightness or “luminance.” WCAG 2.0 mandates at least a 4.5:1 ratio between foreground and background colors/images and a 3:1 contrast ratio for large text. (Large text is defined as anything greater than 14-point [8.66 px] and bold, or 18-point [24 px].)

Several online tools can help evaluate color contrast on your site:

• WebAIM Color Contrast Checker can check if your foreground and background color combination will pass or fail by inputting colors in RGB hexadecimal format. 
• Color Contrast Analyzer allows you to analyze a webpage or parts of it against the WCAG standards for contrast ratios.

eCommerce accessibility: A journey, not a destination

Focusing on proper eCommerce accessibility from the very beginning can save you a lot of trouble down the line. Retrofitting an existing design to be accessible, however, can be much harder.

If drastic changes can’t be made to your site structure or design, start by focusing on the most important pages of your website — your homepage, product pages, shopping cart page, and checkout page.

And remember that in the end, accessibility isn’t a destination you reach and never consider again. Instead, it’s a journey of constant improvement. 

Plugins may be the place where you start, but we highly recommend saving for and investing in a comprehensive audit to make sure your site is accessible as possible. After all, Americans with disabilities represent $480 billion in collective buying power — and they deserve to feel as home on your eCommerce site as any other shopper. 

Until then, follow the tips in this guide to address the lowest-hanging accessibility fruit for your site, and create a strategic roadmap for the months and years to come.

Guest Author: Entrepreneur and digital marketer Mike Belasco has been the founder and CEO of eCommerce digital marketing agency Inflow since 2007. His background as a web developer and SEO expert built an agency that has worked with major brands like Amazon, Overstock.com, Dish Network, and many more. Today, Mike leads a team of more than 25 PPC, SEO, and conversion optimization specialists as a boutique, fully remote eCommerce marketing agency.