Brands often overlook the accessibility of an e-commerce site when designing customer experiences.
But when done well, it can save you thousands of customers and sales that you might otherwise miss.
As an e-commerce digital marketing agency, we’ve worked with many online stores over the years – and along the way, we’ve discovered some very common accessibility issues on these brands’ websites.
In this blog, we’ll be listing a few of them (plus solutions to fix them!) to help your website improve your reach strategy and reach a new audience of shoppers.
What does e-commerce accessibility mean?
First, let’s get on the same page about what “online accessibility” really means.
Accessibility means that any website, application or other platform on the Internet can be used by everyone, regardless of their physical or mental capabilities.
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’s on the page and interact with the site in an intuitive way.
Because this field encompasses so much, the Web Content Accessibility Guidelines (WCAG) are there to clarify the specific standards that make websites accessible to people with disabilities. These guidelines are organized into 12 principles, which define minimum requirements for making web content accessible and easy to use.
WCAG provides insightful guidance on evaluating each page of a website – not only for accessibility, but also for user experience (UX), which is equally important for search engine optimization (SEO) and conversion rate optimization (CRO).
Any sites that do not meet these standards may be considered discriminatory by law — and could be subject to fines and other penalties, as detailed in the Americans with Disabilities Act (ADA).
So, if your site doesn’t meet ecommerce accessibility standards, it may only be a matter of time before you run into legal trouble.
6 Ecommerce Access Mistakes You Should Watch Out For
So, if you want to make sure your e-commerce site is accessible, where do you start?
Accessibility is an ongoing effort, not just a one-off checklist. It is a strategy that will need to be revisited often to keep up with new developments and technologies.
However, when it comes to the basics, we recommend checking your site for the following errors.
1. Rely only 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 an ever-evolving standard. For example, WCAG has been updated twice since its initial launch in 2008 and is likely to be updated again as new technologies come out. Additionally, plug-ins aren’t enough to comply with the ADA.
But that doesn’t mean it isn’t a useful place to start!
Some plug-ins include widgets that give users the option to change visual aspects on web pages, such as fonts, spacing, colors, contrast, and alignment — all of which can help visually impaired individuals read website content.
However, these plugins simply can’t cover everything your ecommerce site needs to truly get there. To achieve ADA compliance, you’ll also need to support keyboard navigation, improve screen readers, properly tag images, and include form labels.
We highly recommend investing in a manual human-led accessibility audit. This will provide a comprehensive overview of your current accessibility status (and detect errors that common plugins won’t catch).
Proofreading can be difficult, especially for websites with hundreds of pages of content. Fortunately, you can hire an expert to do all of that for you.
Consider the following accessibility audit testing services to get started:
2. Forgetting to use alt text
Alt text describes an image to screen readers and appears in place of the image if it is not loaded. Therefore, it is crucial to help people with visual impairments understand what is on your site.
Imagine you’re trying to read an article online, but all the words have been replaced with random characters like “ahsdadsda121672. jpg”, so you can’t figure out what it’s saying. This is what happens when a visually impaired person 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 of your images, search engines may not be able to index them properly, which can hurt your SEO efforts.
When you run an e-commerce website, you have a a lot From Pictures – Pictures of products, promotions and more. This means that alt text should be a top 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 as necessary using appropriate best practices:
3. Choose irrelevant anchor text
Anchor text refers to text displayed as a clickable link on a web page or in an online document. It’s the copy that tells screen readers and search engines what the landing page is about, so that when someone clicks on your link, they land on a page relevant to them.
However, many websites are unaware of how anchor text affects their users. Instead, they often link to pages using “click here” as anchor text – which can be incredibly confusing for those who use screen readers.
With no specific context for the anchor copy, users are left wondering where exactly the hyperlink will send them.
Fortunately, with relevant anchor text, you can create a more positive user experience on your ecommerce site And Improve your search engine optimization efforts.
Let’s take this blog post as an example. If we wanted to direct our readers to more e-commerce accessibility errors from an external resource, we would use this body text: “E-commerce Accessibility Errors.”
In contrast, generic wording (such as “click here”) will make it difficult for our readers (and Google search bots) to understand the purpose of the link.
Be specific in your anchor text, and your customers will thank you for it.
4. Using illogical page structure
A well-organized e-commerce website is one that follows the natural order of things. We’re not talking about engineering your site here; We refer to the structure of each individual web page.
To make sure your pages are easy to access and read, you need to use headings. When used correctly, these provide structure and context for the content you include on each page.
Heading tags (H1, H2, etc.) help organize web page content into a logical hierarchy. The first and most important of these is the H1, which serves as the title of the page.
From there, you can use H2 (and subheadings like H3, H4, etc.) to segment your page content. However, your titles should always follow a logical order; You can’t jump from H2 to H5 without confusing your screen readers (and users).
Your web developer can help you fix any inconsistencies in your 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. Delete tab navigation
Most web users navigate websites using a computer mouse. But for others, this is impossible.
People who are blind or have low vision may not be able to see the mouse at all. Similarly, people with mobility impairments may not be able to use a mouse because of their physical limitations.
Instead, these individuals will use the “tab” button on their keyboard to navigate the web.
If your e-commerce site doesn’t include tab-navigable links to help your customers navigate around your site, those customers won’t be able to browse, select products, or complete online purchases.
To ensure a keyboard-accessible website, you’ll need to work with your web developer to:
- Implement visual keyboard focus
- Correct tab order
- Eliminate keyboard objections
keyboard focus
Keyboard focus allows the user to see where they are in relation to the page structure. Website elements can be operated with this focus or modified using the keyboard.
Most web browsers automatically provide a focus indicator that shows a border around the element. However, your developer should also implement and modify this feature on your website to make it more visible.
tab order
Tab order is the order in which a user can navigate through items by pressing the tab key.
An appropriate tab arrangement should be intuitive and match the structure of a web page, following the way a human would normally browse a website – left to right, top to bottom.
Eliminate keyboard objections
A keyboard trap occurs when a user cannot walk away from an interactive element on a Web site using only the keyboard.
Items such as dialog boxes or calendar widgets often have keyboard traps where users are unable to close them after pressing “Tab” or “ESC”.
6. Use of improper color contrast
Color contrast is an important aspect of online accessibility and helps your customers to better view your website content.
Although certain color combinations can be aesthetically pleasing, they can make it difficult for someone with a visual impairment to browse your website. People with low vision may have difficulty distinguishing between certain colors or perceiving differences between shades of colour.
This is where color contrast comes in.
Contrast is the difference between two colors in terms of brightness or “luminance”. WCAG mandates at least 2.0 a 4.5:1 The ratio between the foreground and background colors/images and a 3:1 Contrast ratio for large text. (Large text is defined as anything larger than 14 points [8.66 px] and bold, or 18 points [24 px].)
Several online tools can help assess color contrast on your site:
- WebAIM Color Contrast Checker can check if a combination of foreground and background colors will expire or fail by entering the colors in RGB hexadecimal format.
- The Color Contrast Analyzer allows you to analyze a Web page or parts of a Web page against WCAG standards for contrast ratios.
E-commerce accessibility: a journey, not a destination
Focusing on proper e-commerce accessibility from the start can save you a lot of trouble. However, modifying the existing design to be more accessible could be much more difficult.
If drastic changes to your site’s structure or design can’t be made, start by focusing on the most important pages of your website—your home page, product pages, shopping cart page, and checkout page.
And remember, in the end, the destination you reach is not a possibility and you never think about it again. Instead, it is a journey of continuous improvement.
Plugins may be where you start, but we highly recommend saving and investing in a thorough audit to make sure your site is as accessible as possible. After all, Americans with disabilities represent $480 billion in collective purchasing power—and they deserve to feel at home on your e-commerce site just as much as any other shopper.
Until then, follow the tips in this guide to tackle the least pending accessibility fruits for your site, and create a strategic roadmap for the months and years to come.
Guest writer: Entrepreneur and digital marketer Mike Belasco is the founder and CEO of Inc Inflow e-commerce digital marketing agency Since 2007. His background as a web developer and SEO expert has established an agency that has worked with major brands such as Amazon, Overstock.com, Dish Network and many more. Today, Mike leads a team of over 25 PPC, SEO, and conversion optimization specialists as a fully-remote, renewable, e-commerce marketing agency.
