Best Practices For Making Your eCommerce Website Accessible

Have you ever clicked off a web page because it was hard to navigate or the images wouldn’t load? This is a similar experience to those with visual disabilities trying to navigate many eCommerce websites and often, they end up just taking their business elsewhere. With approximately 15% of the world living with a disability, web developers and business professionals should be prioritizing eCommerce website accessibility, not only for moral reasons but also to target this untapped audience. 

Developing eCommerce Website Accessibility for All Shoppers 

The disabled population includes a wide range of physical, cognitive, and learning disabilities that require different assistive technologies or accessibility practices for an inclusive online experience. Understanding the challenges of various shopper limitations and their accessible solutions is an important first step in developing eCommerce content. 

1. The Visually Impaired or Blind

Across the world, over 2.2 billion people suffer from visual impairments, according to the WHO. Needless to say, this is a massive number of people who struggle to easily use inaccessible websites. 

• Solution #1: Develop your website to be screen readers compatible. Screen readers are a software that allows those with visual impairments to read web content through a Braille display or sound system.
• Solution #2: Keep your online store website simple and minimalistic. This will help combat browser incompatibility issues. Special browsers such as MozBraille, EMACSPEAK, or pwWebSpeak have been developed to aid those with visual disabilities. However, as the mainstream browsers such as Chrome, Safari, and Firefox continue to advance, these accessibility solutions fail to keep up.
• Solution #3: Use high-contrast color schemes when choosing text colors. This helps people with visual impairments to distinguish between the foreground and background. Online tools like Wave and CheckMyColours can do a quick check of your website.
• Solution #4: Include audio description offerings for visual elements. Audio description is an accessibility solution that narrates the visual elements of a website, allowing those with visual impairments to equally experience visual content. Test out cielo24’s audio description offering here. 

2. Colorblind Online Shoppers

1 in 12 men and 1 in 200 women are colorblind in the world. This is a major problem if a large portion of your audience

cannot see your website colors, especially for eCommerce businesses where visualizing and choosing color options is essential. 

• Solution #1: Utilize the color wheel to select high-contrast colors for images and visual elements. In addition to color checkers, web developers can also rely on the color wheel to select complementary colors, such as red/green or blue/orange for your website. This high-contrast selection is great for images and visual elements, such as footers, logos, menu bars, etc, but not good for text
• Solution #2: Adding shapes, textures, or other cues for page elements such as buttons or CTAs. When accessing an online store, people with colorblindness may have trouble distinguishing page elements from other text or images. For example, simply underlining an external link makes a big distinction for those that are colorblind. 

3. The Hearing Impaired or Deaf

According to the WHO, 466 million people worldwide have hearing loss. If your site includes video or audio, it is incredibly important to include accessible solutions. 

• Solution #1: Adding captions and transcripts to your video or audio content. Closed captions are the go-to accessibility solution for those with hearing disabilities. They allow all users to read the content, rather than hear it. They are even important for non-visually disabled users as over 85% of online video is consumed with the sound on mute. 

Tips for eCommerce Website Accessibility

Including explanatory link text

Instead of writing “Read more” include a descriptive phrase such as “Read more about eCommerce here”. This will allow your site visitors to make distinctions between your outbound links if they are navigating through text alone.

Prioritize text clarity

If your site visitors can’t understand your message, you’re losing most of your audience. Text clarity not only encompasses word choice, but also text size, color, contrast, positioning, etc.

Don’t solely rely on color to communicate

Instead of having your text box turn red when a customer doesn’t fill out a required box, also include text to communicate that information is missing. This could be also including “The field is required” in any color. This will aid colorblind shoppers.

Order content in HTML for screen readers

When designing your website it’s important to keep in mind the reading order. Screen readers read content in a linear order, making it important to create a source code to avoid shopper confusion.

Enable keyboard navigation for web design

Not every user will use their mouse to navigate your page. This makes it incredibly important to design your pages in a way that is keyboard-friendly. A good way to test your web navigation is through the screen reader functionality. While right-arrowing around your page, the content order should match what is seen visually. Test links by clicking the tab button to check. If there is a discrepancy, then your website is not keyboard-friendly.

Use a 44×44 px. clickable area for touch controls

Make sure to provide enough space for users to activate buttons and selections, regardless of the device they’re using. A 44×44 px clickable area per target is enough for those with limited dexterity to make a selection. Additionally, this will make your “buy” or “add to cart” buttons easier to select and increase sales. 

cielo24 provides accessibility solutions – Captions, Transcripts, Audio Description

The easiest path to media compliance to meet American accessibility laws is to start captioning and audio descriptions today. Sign up for the Self Serve web app where human-verified transcriptions and captions start at less than $1/minute. Contact us online to get started!

Looking for audio description? Get started with WCAG 2.1 AA compliant Audio Description product. cielo24’s new Audio Description solution brings an improved video experience to people with low vision, vision impairment, and blindness. Give it a try now >>