Back to blog

E-commerce Web Design: Building an Accessible Storefront 

Posted October 14, 2021

AudioEye

Posted October 14, 2021

Online store in a web browser
Online store in a web browser

Ready to see AudioEye in action?

Watch Demo

Designing an e-commerce website should start with making it accessible. Avoid these common errors so you can build an accessible, compliant online storefront. 

Nothing has changed shopping, and shopping behavior, quite like e-commerce. Twenty-five years ago, the technology that makes it possible to buy things online today, would have seemed like pure science fiction. Nowadays, it’s hard to imagine life without it. E-commerce is already huge, and it’s on the rise. In fact, the global e-commerce sales were up 27% in 2020, and are expected to approach $5 trillion in 2021. 

Graph showing increase in global e-commerce market from 2018 to 2021. The global e-commerce market was up more than 27% in 2020.

As more people shop online, the importance of your online storefront grows. It must be functional and accessible — all the time and for everyone. If it isn’t, you could lose crucial opportunities for your business, as well as open yourself up to expensive litigation. In the past few years, litigation surrounding accessibility lawsuits went up 300%, with e-commerce stores representing over 73% of recorded cases. 

So, what does accessibility look like? How do you know if your online store is truly accessible? 

Let's take a moment to go through five common e-commerce accessibility issues and how they can affect your site.

Once you're ready to take action, an accessibility checker can help you identify any issues with your storefront's accessibility and take steps to correct them.

Example of an ADA compliant webpage.

E-commerce Website Design Doesn't Guarantee ADA Compliance 

Let’s be clear — e-commerce sites don’t develop accessibility issues because of some sort of intentional platform provider negligence or malfeasance. 

The fact is, all e-commerce platform providers care about building web designs that are compliant with Web Content Accessibility Guidelines (WCAG) and Americans with Disabilities Act (ADA). Most of these companies take great pains to provide their customers with thoughtfully designed products. 

The reason why so many e-commerce sites develop accessibility problems is because of the way the website building process works. 

Even if you start your website with a 100% ADA-compliant theme (which most platforms offer), you can introduce all manner of website accessibility obstructions over time, as you add or update your content. And when you’re working with thousands of pages, images, and links (as most e-commerce sites do), the risk of introducing errors increases exponentially.

Common E-commerce Accessibility Issues That Could Affect Your Site 

Although it’s possible that e-commerce sites can be afflicted with any number of website accessibility issues, some flare up a lot more frequently. 

Here are the top five most common digital accessibility problems with e-commerce sites:

Example of an image with an alt text tag with the code <img src="mountain.jpg" alt="Descriptive Alternative Image Text">.

1. Missing or Poorly Formatted Alt Text on Images 

Alt text, short for alternative text, is a type of HTML code that provides additional information about an image appearing on a web page. As you might imagine, e-commerce sites are packed with images that are supposed to help prospective customers get a good look at the products. Failing to add the alt text to those images can render the products invisible to people browsing with assistive technology. Of course, there are some images that should be rendered invisible to such users. For example, if your site has images that are purely decorative or presentational in nature, make sure to keep their alt tags empty — that way, screen readers can be directed to skip the image and navigate to product images or other content that matters the most.  

The text Aa is shown in black against a light green background with a green check because the color contrast is high. On the right the letters Aa are shown in white against a light green background with a red X because the color contrast is low.

2. Low Color Contrast 

Color contrast enables people to distinguish colors from one another. Technically, the term describes the relationship between the luminance of two colors. You can think of luminance as the brightness or darkness of a color, where pure white has the highest luminance and pure black the lowest. 

When two or more hues have a high level of contrast, they are easy to perceive. When there’s a low level of contrast, it may be hard to tell where one color ends and the other begins.  

3. Not Providing Descriptive Link Text 

Descriptive link text helps people know where they will end up if they click a given link. Because of the way screen readers work, people can tab through all the navigation options on a page without going through all the text that may be present. When link text is vague or ambiguous (for example, “click here” or “more”), screen reader users have no way of knowing where the link leads. 

4. Keyboard Accessibility Problems 

Not everyone browses the web by moving a cursor with a mouse. People with visual impairments or who experience difficulties with fine motor control will use keyboard inputs — or assistive devices that simulate such inputs — to navigate and interact with a site’s content. All interactive content, such as form fields, buttons, cards, and popups, must be keyboard navigable.

Example of a webpage with a button that has a border outline.

5. Failing to Provide a Point of Visual Focus 

Focus indication is closely related to keyboard navigation. The design feature provides a border outline around interactive elements, such as links, buttons, and form fields, so users can identify the location of their “tab” on the page. 

Because e-commerce sites may have several interactive elements on a page, it’s essential to create logical and clear focus indications.

Example of a website that is not accessible with several errors.

How You Can Provide Accessible E-commerce Website Design for Your Online Storefront

Make content and design decisions with accessibility in mind

The first step toward making a more accessible website is to be mindful of people with disabilities. Understanding that some people require the use of assistive technology to browse and interact with web content, and making your site content and design decisions with that in mind, is an excellent place to start. 

Use web accessibility guidelines 

Adopt and regularly enforce digital accessibility principles, such as adding relevant and descriptive alt text for images and descriptive link text for links. Work with graphic designers to provide high-contrast color guidelines, so your storefront can remain accessible while staying on-brand. 

Enlist professional help

If the task of going through potentially thousands of images and links — not to mention code-intensive work related to keyboard navigation, focus indication, etc. — is beyond the capabilities or scope of your team, consider reaching out to the experts at AudioEye. AudioEye can provide ongoing testing, remediation, and monitoring to help you keep your site accessible and compliant. In the meantime, you and your team can focus on creative projects and ways to improve your products and customer service. 

AudioEye integrates with all major e-commerce content management system platforms and can ensure your site complies with the ADA and conforms to the WCAG 2.2 AA standards. 

Want to see AudioEye in action? Sign up for a free 30-day trial today.

Additional Resources

If you’d like to learn more about the issues affecting e-commerce accessibility and e-commerce website design best practices, check out the AudioEye content below:

  

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading