What is Web Accessibility (And Why it Matters for Your eCommerce Business)

Web accessibility might sound costly or even complex to you, but it is not so in reality. From the design perspective, even small modifications can make a huge difference. And, the benefits that it will provide to your eCommerce platform are unparalleled in the long run.

3 Benefits of Accessible eCommerce Websites

You might have a question in mind: why do we need web accessibility at all? Well, here are some of the fantastic benefits you get when you develop an accessible eCommerce website:

• Creates Delight & Customer Loyalty

  Imagine how a disabled person would feel when he can navigate smoothly through your website without any human assistance? Top of the World, Indeed! That’s the power of an eCommerce store that is accessibility inclusive.

  Such inclusion makes them feel confident about themselves and gives them a reason to stick to your brand.

  Moreover, eCommerce businesses looking forward to creating User Experience should design a website supporting equity (giving everyone what they need) over equality (treating everyone the same).

  
• Adherence to the Web Accessibility Laws

  Website accessibility in eCommerce is a topic that has gained momentum recently owing to the possibilities introduced by the latest advancements in technology. The awareness around the issue has also led to certain critical amendments in the original “Americans with Disabilities Act of 1990”. Such is the significance of web accessibility standards!

  The law, in general, prohibits any form of discrimination against the disabled. According to Title III of the act, websites are considered “places of public accommodation.”

  Where, Public Accommodation = All businesses open to the public (Offline & Online). Thus eCommerce managers are mandated by law to make their businesses accessible for the disabled.

• More Traffic = More Conversions

  According to the Disability Inclusion Overview, around one billion people, i.e., 15% of the world’s population, experience some form of disability.

  Now, that is precisely the number that you are losing out on when generating sales from your “non-accessible” eCommerce solution.

  The secret to the success of your eCommerce storefront lies in the hands of everyone, irrespective of them being disabled. So, if you approach the 15% mentioned above, you’ll be making a lot of difference.

  The math is simple: More traffic = More conversions! After all, you need to be the change that you wish to see in the world!

  Now that you know the excellent benefits of adding accessibility to your eCommerce store, let’s see how you can implement best practices for website accessibility to avail these amazing benefits.

6 Tips for Implementing Web Accessibility in eCommerce

In 2019, the US supreme court decided in favor of Guillermo Robles, a blind person who couldn’t order pizza from Domino’s web and mobile app even after using screen-reading software. In the last year, many such cases put eCommerce businesses on strict notice: now is the time to make your e-stores accessible.

While these lawsuits are just one reason, an accessible eCommerce site provides other benefits as well—for example, enhanced customer experience, better SEO, improved brand reputation, and more sales.

Here are six tips to make your website accessible for everyone out there with or without disabilities:

• Use the Right Colors

  Color is a vital visual element that a business can use to drive actions and create a strong brand image.

  However, color blindness affects around 8% of men and 0.5% of women in the entire world. Therefore, websites should use colors carefully and never as the only means for conveying important information.

  Here are some best practices for using colors to improve eCommerce web accessibility:

  Avoid Low Contrast Colors

  The primary issue color blind people face is difficulty in seeing colors having less contrast. That means what you may see as a subtle text effect could be impossible for some of your website visitors to see, not only if they are color blind but also if they have low vision.

  Therefore, make sure you take the color wheel’s help and contrast using complementary colors only — at the opposite end of the wheel. It provides high impact and high contrast color combinations that appear brighter and help you improve web color accessibility.

  

  Avoid Giving Instructions Using Colors

  For making your website accessible, it is necessary not to provide any vital information using colors only. For example, when designing forms, you shouldn’t indicate “required” fields with only colors. Here is what a good and bad form design look like:

  

  Provide Color Names in Description

  Let’s imagine you sell clothes online. For visitors having color blindness, it won’t be easy to detect the colors of garments on your website. For example, a red dress might look very different to them.

  

  That’s why it is crucial that your eCommerce website provides exact color names in description to avoid confusion and for making the user experience better and enjoyable.

• Design for People with Hearing Loss

  Because online stores are mainly a visual experience, you must be thinking about what eCommerce challenges people with hearing impairment face when using such sites.

  According to WHO, around 466 million people in the world suffer hearing loss or are deaf. These people, when visiting eCommerce websites, confront several problems. For example, people who are born deaf have difficulty reading the text as they are used to sign language only. Also, they can’t understand the video content your eCommerce websites produce.

  But, you can solve these problems with proper design initiatives, including:

  • Create Sign Language Videos: This could be one of the web accessibility challenges for eCommerce store owners. However, for making your website accessible for more than 466 million people globally, it is crucial. Consider producing sign language eCommerce product videos for every part of written content on your website.
  • Provide Video Captioning: You must add subtitles or captions at the bottom of every product video you produce. These subtitles need to include dialogue, laughter cues, and even the sound of applause. Video transcriptions should also have a description of what is happening in the video. And, to meet accessibility standards, it is also required to be accurate.

  Alternatively, you can also consider providing a transcript that users can print to read later on. The National Association for the deaf’s website is the best example of designing for people with hearing loss or deafness. Along with sign language videos, the website also provides a transcript for every page.

• Make your Website Accessible by Keyboard

  People having vision problems or motor disabilities find it easy to navigate a website using the keyboard only. They have trouble using the mouse or while clicking web elements that are too close to each other. Therefore, as per WCAG guidelines, all essential functionalities of a website should be accessible by keyboard.

  If a website is keyboard accessible, users can use a keyboard to use all its control elements. A control element can be an interactive function on a web page like links, forms, buttons, etc.

  For example, when a user presses a Tab key on their keyword, the focus should shift from one interactive element to the next in line for better accessibility. In websites that comply with W3C best practices, focus states are applied to interactive elements when they get the focus. Here’s an example:

  

  Source

  In the above image, the focus element is differentiated by the others with underlined text, a grey outline, and a little enlarged arrow icon.

  Also, keyboard web accessibility testing is completely effortless. It does not require any superior technology, and you can do it manually. Just go to your own digital commerce website and try making a purchase using the keyboard only.

• Use Alt Tags to Define Images

  High-quality and emotions provoking images are the best options for creating an impact in your user’s mind. However, these images can be an accessibility barrier for blind users and those having low vision.

  These users will rely on screen readers or other assistive technologies to comprehend images on your eCommerce website. Screen readers are programs that read the text on the screen using a Braille display or synthesizer.

  But, none of these technologies can read images or text in the pictures. Therefore, websites let you add an Alt tag for every image you upload to describe it to search engines and blind users. Therefore, to make your website accessible, use “Alt Attribute” for a brief description and “Longdesc Tag” for detailed descriptions.

  

  Ensure all Alt tags on your website are clear, concise, and don’t have more than 250 characters. Alt text also helps you improve the SEO of your website by giving search engines more information to crawl.

• Let Users Control Elements

  Several eCommerce websites add product images in a slider, video, or as a carousel. Though these high-quality graphics may look beautiful at first sight, some people might not be able to comprehend the information you are trying to convey quickly enough to disappear.

  Such users may want to see it once again or go back to the previous slide to comprehend what they just heard or saw. That’s why it is crucial to give users the control so that they have enough time to understand the provided information.

  
• Optimize your Content Structure and Headings

  For making websites understandable, it is crucial to make their content organized by using headers carefully. It won’t just help people with disabilities but will also improve the overall user experience.

  Just like web crawlers, assistive technologies use headings to quickly navigate a page and let users jump to a particular section that they find interesting. Additionally, it is effortless to do it — you just need to make sure you use correct heading tags in your content. Here are a few tips that will you make your content structure accessible:

  • Use just one H1 per page — in the page title.
  • Headings should always be in order — avoid using H4 directly after H2.
  • Use HTML5 landmarks and their ARIA equivalents to designate content areas.
  • The size of the text must be easy to read and understand.
  • Ensure interactive elements stand out.
  • Give users the ability to increase fonts on mobile devices.
  • Make sure all website links make sense out of context.
  • Make website navigation easy with the help of site search or site map.
  • Provide orientation cues such as clear headings and breadcrumbs.
  • Style your headings to group content pieces and reduce clutter.
  

  If you implement these accessibility tips while developing eCommerce websites, it will undoubtedly attract more users with disabilities to your website. These efforts will result in more conversions and revenues. Let’s now see websites that are already nailing the web accessibility game.

Web Accessibility Examples: 3 Websites that are Doing it Right

Now that we know there are legal as well as moral reasons to make your website accessible, let’s look at three websites that are already doing it right and draw some inspiration.

• Amazon

  As one of the leading eCommerce businesses globally, Amazon always makes sure that all users can have equal access to their products and offerings — no matter what their disability is. Amazon team’s efforts to maximize their business’ reach (including the large market of people with disabilities) is one of the many factors behind their immense success.

  If you shop on amazon.com, you will find almost all the above-mentioned best practices implemented on their website. Have a look at how Amazon makes it easy for color-blind people to shop by adding the color’s name on each thumbnail displayed when the user hovers over it. Plus, it gives users the control to change and see the product images from different angles repeatedly.

  

  Amazon provides all the information clearly in the text as well for screen readers to comprehend products and website content. The hues used are vibrant and bold that pass the accessibility contrast test, and all functionality of the website is accessible with a keyboard. A win-win for all types of website visitors!

• Warby Parker

  Website accessibility is an inevitable part of developing a beautiful eCommerce UX. Being a leading online retailer of prescription glasses and sunglasses, Warby Parker also has a well-designed accessible website for all its users.

  All non-text elements on their website have Alt tags, forms have clear labels, colors used are complimentary, and buttons are clear and well-designed — making Warby Parker a beautiful yet accessible website.

  

  Additionally, they also declared their target of accessibility and how they are adhering to web accessibility guidelines by publishing an accessibility statement on their website.

• Walmart

  When it comes to world-class retailing, Walmart is the first company that draws our attention. The Walmart website is also one of the best examples to follow when looking to achieve web accessibility.

  The website is easy to use, has clear links, well-structured code, keyboard accessibility, optimized images, clear, interactive elements, and almost everything required for those with unique abilities.

  As the above-mentioned perfect web accessibility examples demonstrate, there is no need to sacrifice your website’s attractive designs to make it accessible for users with disabilities. Accessibility and beautiful web designs can coexist. In fact, if you address accessibility early in design and development, it can drive universal usability benefiting your users and business.

Conclusion

The demand for accessible eCommerce websites is rising. As people with disabilities can now use emerging tech to achieve whatever they want, non-accessible websites are rapidly becoming a matter of the past.

Also, as a reputable and responsible brand, your e-store needs to be accessible by all. Hopefully, the facts and tips listed in this guide will help you tap into a broader and hidden consumer base leading to more sales and revenue.