3 Tips to Make Your E-Commerce Store Accessible

Back to blog

3 Tips to Make Your E-Commerce Store Accessible

Posted June 26, 2023

AudioEye

Posted June 26, 2023

A stylized version of an e-commerce site printed on the side of a shopping bag, with an accessibility icon in the corner.
A stylized version of an e-commerce site printed on the side of a shopping bag, with an accessibility icon in the corner.

If your e-commerce site isn’t accessible, you’re limiting your number of potential customers. Learn why e-commerce accessibility is important and how to create an accessible web store.

Online shopping is supposed to be all about convenience. But for the 1.3 billion people globally who live with a disability, accessibility issues can make it a frustrating — if not outright impossible — experience.

When AudioEye analyzed more than 3,500 websites across 22 industries, we found that 83% of e-commerce sites had accessibility issues that impacted a user’s ability to complete critical tasks, like completing a purchase or booking an appointment.

In this post, we explain the importance of digital accessibility and share tips on how you can make your website accessible to every shopper.

A list of icons representing different disabilities: Visual, Speech, Auditory, Cognitive, Physical, Neurological

“If your website isn’t accessible, you’re losing customers. And even if it’s technically accessible but a real pain … you’re probably still going to lose some customers.”

Christy Smith | Accessibility Tester

What Is E-Commerce Accessibility?

For online retailers, website accessibility is the practice of designing online stores in a way that allows people of all abilities — including those who use assistive technologies like screen readers — to easily browse products, find key information, and complete transactions.

According to the World Wide Web Consortium (W3C), all digital content — including online stores — has to be easy to perceive, understand, interact with, and navigate by people who have any of the following disabilities:

  • Auditory
  • Cognitive
  • Neurological
  • Physical
  • Speech
  • Visual
A stylized version of an e-commerce site, with a closed sign in front of it.

Why Digital Accessibility Matters for E-Commerce Stores

Digital accessibility is one of the most critical elements of running a successful online store, the same way that physical accessibility (like ramps and rails) is critical to running a successful brick-and-mortar store.

Think of it this way: Having an inaccessible website is like having an “Open” sign in the window of your storefront while the door is locked. Customers can find you, but they can’t come inside.

By making your online store accessible, you’re “unlocking the door” for any user who wants to browse your products or services. You’re also creating better customer experiences and fostering inclusivity — both of which can help you earn customer loyalty and grow your business.

“People with disabilities tend to be more loyal consumers. We will stick with companies that go out of their way to make us feel welcome.”

Maxwell Ivey | Disability Advocate

We also can’t discuss the importance of digital accessibility without mentioning the need to comply with the Americans with Disabilities Act (ADA).

Although the ADA doesn’t specifically mention websites, the Department of Justice (DOJ) has consistently maintained that business websites are “places of public accommodation” — and, as such, must be accessible under Title III of the ADA.

A stylized product card of a t-shirt, with alt text that reads "Women's plain pink cotton t-shirt."

Three Tips To Make Your E-Commerce Site More Accessible

1. Keep Visually Impaired Users In Mind

Globally, about 2.2 billion people have some type of visual impairment. For many of them, shopping online can present unique challenges — especially when websites are not designed for assistive technologies like screen readers.

Here are a few best practices for designing accessible online storefronts for people with visual impairments:

  • Structure content with clear headings: If your HTML headers aren’t descriptive — or if you don’t use headers to separate ideas and break up large sections of text — it can be hard for a screen reader user to skim your page and decide if they want to read more.

  • Use simple and descriptive language: The World Wide Web Consortium’s (W3C) Supplemental Guidance to WCAG 2 includes best practices for clear and understandable content, such as using active voice (which can aid comprehension for people with dyslexia) and avoiding long, dense paragraphs.

  • Add alt text for every image: Alt text is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders. If a product photo does not have alt text, people who use screen readers to read digital content out loud can be left wondering what the photo depicts.

2. Boost Your Color Contrast

For many people with disabilities, color contrast can be the difference between a website that is easy to read and navigate, and one that is completely illegible.

Globally, color blindness affects 1 in 12 men and 1 in 200 women. As a result, the Web Content Accessibility Guidelines (WCAG) — the de facto international standard for accessibility — recommends a contrast ratio of at least 4.5:1 for regular text.

If the text is large (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold), the contrast requirement is reduced to 3:1.

Here are a few other best practices to keep in mind:

  • Don’t rely on visuals alone to convey color: If you sell a product in multiple colors, be sure to note the color in the product description (as well as the alt text).

  • Avoid using color to communicate messages: Websites commonly use red and green highlights to indicate success or failure. For example, if a user misses a required field or enters incorrect data during the checkout process, the border of that field typically turns red to indicate an error. Unfortunately, this is not accessible to people who use screen readers or users with protanopia (red-green color blindness). Instead, consider using a symbol (such as an exclamation point) in front of an error message or add “required” inside the field label for required fields.

  • Underline inline links: For people with visual impairments, color alone isn’t always enough to indicate that an inline link is clickable.

Want to make sure your brand colors have enough contrast? Try using AudioEye’s free Color Contrast Checker.

A stylized video player, with closed captioning that reads: "Buy 1 Get 1 Free T-shirts until December 2nd."

3. Design for Sound Off

If you’re selling online in 2022, there’s a pretty good chance that video is a big part of your marketing strategy.

In HubSpot’s Not Another State of Marketing Report, a survey of marketers said that video is the top content type being produced in their content marketing programs, passing blog posts for the first time.

Whether you use video for promotional campaigns, product explainers, customer testimonials, or some combination of the three, it’s important to do it in a way that doesn’t exclude anyone. And often, that means adding captions and descriptions of visuals that help everyone enjoy your videos.

Here are a few best practices for writing video captions:

  • Proofread auto-generated captions: There are plenty of tools that can automate captions for your videos, but they aren’t perfect and often mix up words. Proofing your captions with human eyes and ears can help catch those mistakes.

  • Synchronize captions: Make sure your captions and subtitles appear on screen as close as possible to when they are said in the video. Many people who are deaf have some hearing — and poor timing can be jarring.

  • Check caption placement: Make sure your captions don’t interfere with important visual elements on the screen.

  • Provide simple access: Make it easy for people to find the caption controls for your videos. Make sure the controls to toggle captions on/off are clearly labeled and easy to see.
An icon of a shopping cart with an accessibility icon on the corner. A mouse cursor is poised over the icon.

Better E-Commerce Website Accessibility Means Happier Shoppers

The best way to ensure your e-commerce site is accessible to people of all abilities is to incorporate accessibility features into the planning and ongoing site maintenance. If you’re unsure where your e-commerce store stands on the spectrum of website accessibility, AudioEye is here to help.

Take a look at our resources on accessibility compliance to get a better understanding of what your e-commerce store needs in order to be accessible, or enter any URL below to get a free scan of your website's accessibility.

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading