Three Tips To Make Your E-Commerce Site More Accessible
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.
Whether you’re getting ready to launch your e-commerce store or have been selling online for years, prioritizing accessibility is key to your business’ success.
Consider this: 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 discuss the fundamentals of e-commerce accessibility and share tips on how to make your website accessible to every shopper.
What Is E-Commerce Website Accessibility?
E-commerce 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:
Why Online Shopping Accessibility Matters
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.
We can’t discuss the importance of digital accessibility without mentioning the need to comply with the Americans with Disabilities Act (ADA). The ADA is a civil rights law that prohibits discrimination against people with disabilities in all areas of public life. 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.
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.
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.
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.
E-Commerce Sites Have An Accessibility Problem
54% of assistive technology users feel like e-commerce sites don't care about earning their business. Here's what your business can do about it.
May 30, 2023
Why Manual Testing Equals Smarter Automation
Automation is a critical part of solving digital accessibility at scale, but it works best when backed by human experts.
May 23, 2023
Debunking Common Myths About Digital Accessibility
Learn about some common misconceptions for digital accessibility — and what they mean for your business.
May 15, 2023