Creating eCommerce accessibility for your store is the right thing to do for your audience. Every customer should be able to enjoy your site, browse your selection, and purchase your products. In this post, we’ll look at ways to make your site more inclusive and supportive. Thankfully, many eCommerce-focused can tools help websites reach their entire audience with visual, auditory, and other changes.
This article was originally published in July 2017. We’ve updated it for current research, tools, and support options, and republished it on June 2, 2021.
Understanding audience needs
According to the World Bank, approximately 15% of people worldwide experience some form of recognized disability. In the U.S., the Census Bureau says 12.7% of the population have a recognized disability, including 3 million children and 7.9 million people active in the American workforce. All websites should be inclusive of Americans with disabilities, be they customers, colleagues, or someone looking to learn more about your industry.
There’s no question that 41.1. million people (in the U.S. alone) is a significant number of people. Unfortunately, website accessibility for disabled people is often overlooked when it comes to design basics, especially in areas like eCommerce. Searches, ads, social posts, and other content may direct these individuals to sites that aren’t welcoming, creating a frustrating experience.
Making eCommerce accessibility a focus of your design helps improve all customer experiences and creates a connection with visitors. It’s a good policy and demonstration of company values. Inclusivity is also a favorable business decision because you’re available to more consumers, comply with legal requirements, and avoid search engines’ penalties for lacking accessibility.
Compliance and requirements
Working on eCommerce accessibility is more than just making your store available to as many people as possible. You’ll also need to consider how to comply with the Americans with Disabilities Act (ADA) and the Web Content Accessibility Guideline (WCAG).
The ADA generally requires non-profit services and U.S. businesses to make their websites accessible to people with disabilities. It covers requirements for the general public and employees — if your business has more than 15 employees — which may impact the design of your internal systems and the outward-facing store. The WCAG is an internationally recognized set of guidelines for digital accessibility that many U.S. agencies and courts use to determine technical requirements for compliance.
Even if your compliance isn’t legally mandated, most small business owners can benefit from meeting these standards anyway. Compliance encourages more visitors and can reduce potential liability issues.
How do you make sure your eCommerce store is ADA compliant?
There are several critical criteria on the ADA checklist that your online store will need to adhere to so you avoid compliance problems.
Some of the essential requirements include:
- Making sure you have an alt tag on every audio file, video file, image, plug-in, etc., on your website
- Providing detailed text descriptions for any complex graphics on your eCommerce store
- Providing captions on and audio description options in all videos
- Making sure your web pages don’t contain any images that flash repeatedly
Another major factor that’s not always considered when designing an online store is the problems some people might have viewing a page correctly because they have an issue with color blindness.
It’s worth remembering that the global figures for color blindness are surprisingly high, with 1:200 women and 1:12 men suffering from color blindness. People with this concern have difficulty distinguishing contrasting colors when trying to interpret what they see on a web page or elsewhere. This makes it challenging to see different elements on a page that aren’t designed to tackle this issue.
You can take many steps to create an accessible eCommerce website for people who have color blindness. One of the primary objectives is to make sure the colors you use are from opposite ends of the color wheel. This will ensure they contrast dramatically and stand out to color-blind users.
Equally, avoid certain color combinations if you’re going to make your online store user-friendly to color-blind visitors. These are:
- Light green/yellow
Other visual best practices
Here are some other design features that will ensure your site can be easily read and is more navigable for color-blind users:
- Use different shapes and textures for different elements on your web page so that it adds other distinguishing features besides colors
- Avoid text over images unless they contrast significantly
- Look to add a text label to color swatches so users can hover over the color to see what it is
- Provide link recognition by using more than just color
- Consider adding icons or underlining them so that it’s clearer they are links
- Help make alert messages stand out by using icons or prefix text
- Remember that alerts usually are distinguished with red or green colors, but those suffering from achromatism won’t be able to distinguish these
- Exclamation marks or ticks are great symbols to distinguish messaging and intent
- Words like “Success” or “Error” can be used to help distinguish messaging and intent
- Flag required form fields with asterisks or “required” instead of just using colors to differentiate required and non-required ones
Some useful design tools help you see your online store like a color-blind user. ColorOracle.org helps you see what people with common vision impairments will see when they visit your site. The Contrast Checker on WebAim.org can test whether two colors pass the guidelines for accessibility.
Access for people with visual impairments and blindness
According to World Health Organization figures, more than 2.2 billion have a vision impairment, including nearly 50 million blind persons. The Internet is a daily part of many of their lives, thanks to accessibility tools. So, they’ll naturally shop from accessible eCommerce websites tailored to their needs.
You can do several things with your online store to accommodate as many of these visually impaired visitors as possible. First, test your website to make it compatible with screen readers. WebAIM has suggestions on which screen readers to test and how to run those tests.
You also can consider using larger text, multiple types of header tags, and supporting screen magnification. Be proactive with your website design to ensure it’s capable of accommodating the latest browser versions and supports both text-only and zoom features without it affecting the layout of your site.
Furthermore, people have recognized eye diseases such as cataracts and glaucoma, which have a detrimental impact on their ability to distinguish contrasts. Modern site design often tends to rely on subtle gradients. But, to make your online store more accessible for people with common eye diseases, consider the idea of creating a second version that’s more contrasting.
A growing number of people are accessing web content via their mobile, and you need to consider this aspect when designing your site. Mobile sites tend to be more accessible for people with vision impairments. Many users will want to switch to your mobile site for that improvement and assistance.
Make it easy to switch to the mobile site and test to ensure this doesn’t cause compatibility problems. It’ll improve the overall visibility and accessibility of your eCommerce site.
Use space around your website elements so that it isn’t cluttered and hard for the customer to see or read. This will help people with vision difficulties, such as blurred vision or issues with contrasting colors, to navigate the site with greater ease. It also makes it easier to design a mobile site version that is useful and fully functional.
One thing that companies may overlook here is the use of keyboard shortcuts. Enabling these on your website, including on the mobile version, makes it easier for everyone to navigate. Keyboard shortcuts, such as the arrow keys for navigation, minimize the need for using a mouse and reduce the difficulty of finding or moving the cursor on the screen.
CAPTCHA codes can present a dilemma when balancing the need to eliminate spam and the difficulties they can create for people with vision impairment. Some users might find it almost impossible to distinguish or decipher the characters included within the code, especially as it won’t increase in size if you try to zoom in on the details.
The W3C presents some potential alternatives to CAPTCHA, or you could ask relevant questions instead of using any CAPTCHA system.
Website problems for people with hearing loss
Although you might consider that your online store is primarily a visual experience, it’s worth remembering that there are around 466 million people worldwide who suffer from some form of hearing loss, according to the World Health Organization.
People suffering from hearing loss or deafness face several challenges when they come to an online store. This can spoil their enjoyment of the content or lead them to click away if they’re not able to access the content in a way that meets their needs. Stores can overcome such issues with targeted design initiatives.
When you have a video or audio feature on your site, consider including subtitles so users can read the spoken words. Alternatively, think about creating a transcript they can read at their own pace. Search engines like Google reward you for providing a transcript on the same screen as the video, both for supporting eCommerce accessibility and by using relevant keywords more.
Consider the idea of offering sign-language videos on your site. If someone’s struggling to read the text on your site or hear a voice in your video, a sign-language option will transform written content into something they can engage with easily. These can be slightly more expensive to produce, but it’s worth remembering that ASL is the first language of most deaf and hard-of-hearing individuals. That’s many visitors who might find this option useful.
Addressing fine motor control concerns
Unfortunately, designers can often overlook people with fine motor problems with their eCommerce accessibility efforts. These individuals have unique needs to address, such as difficulty clicking on small buttons or form fields that are close together. It’s recommended to leave at least 2 mm between each box.
Individuals with these health concerns also benefit from keyboard access. Include shortcuts that allow for navigation on your menus, radio buttons, and form fields.
Older Americans and shoppers are often included in this group because motor skills can decline during our lives. Many of the elements discussed here and above, such as larger text, can help your older shoppers.
Also, you should allow for short-term memory concerns or the possibility of confusion. That means designs where users don’t have to remember how to use your eCommerce website’s interface. Aim to gradually offer new information that you present on-screen and add reminders and cues where possible. Try not to place tasks on multiple screens and avoid the use of pop-ups where possible.
It’s a good idea to remove any distractions from the page, including sounds and movement, as this may prevent them from completing what they’re doing. Allow sufficient time for users to fill out forms before the page times out.
Keep the language simple, avoid complex terms, industry jargon, and long sentences so that your site is easy to navigate and use for all. That’s always the top goal for eCommerce accessibility efforts.
ECommerce accessibility is easier than it seems
Although some of the features mentioned may appear time-consuming and expensive to implement, many of them are easy and inexpensive to carry out. Create an online store that is accessible to as many different users as possible. You will increase your chances of attracting more shoppers with disabilities, which will help increase your revenue.
Taking the time to plan how to accommodate more disabled visitors to your site is a win-win situation, and your efforts can translate into increased sales and more positive feedback from customers.
More reading and resources: