Skip to main content

eCommerce website accessibility for people with disabilities. WCAG compliance.

| Andrzej Herzberg | Joomla Templates

We are not stopping in ZoneStore eCommerce website template development and going ahead with adding WCAG adjustments for this awesome eCommerce solution.

Shopping must be a nightmare

Doing shopping online must be a nightmare for people with disabilities, how do I know that?
It's simple to imagine for me. It's enough I remove contact lenses from my eyes I would not see what I'm writing now :)

On the contrary to people with visual disabilities, I'm lucky because I can use contact lenses and browse the Internet or buy online without any difficulties. 

Acquire new loyal customers

Recent statistics show that around 1 in 5 people in the U.S. live with one or more disabling conditions. Hundreds of lawsuits alleging ADA discrimination were filed against websites and it costs e-commerce retailers expensive and lengthy litigation. 

usa people disabilities

To prevent the digital exclusion on your eCommerce website and avoid problems with the law in your country make your online store accessible to all users including those with vision, physical, cognitive, and hearing impairments.

It's obvious that adjusting your website to WCAG requirements will cost some money, however, once you have the accessibility-ready online store you will gain new customers who will come back to your accessibility friendly online store. Moreover, those valuable customers will appreciate your efforts for sure and tell their friends great news about your online store easy browsing and purchase simplicity.

"Accessibility is a basic human right. It benefits everyone." – Eve Andersson, Google

E-commerce retailers are confused but there is a solution

eCommerce business owners often contact us asking about WCAG solutions for their websites and to be honest usually they are really confused about it. And I really understand them because suddenly they are obliged to "do something" on their online store to make it accessible but they have no idea how to start? what should be done? what are the best solutions?

Because of the fact that customers may find on Joomla-Monster WCAG compliant Joomla templates and WCAG WordPress themes under PixelEmu brand, they often assume that installing the WCAG theme is enough. But WCAG guidelines is a really long long story including tons of requirements to follow. This is the reason why customers get lost. It's also problematic for us because it's really hard to explain all WCAG details in a few words.

Most common problems:

  • customers think it's enough to install WCAG theme only. And what is even worse, they think they may install, for example, Joomla WCAG ready template for its own eCommerce platform
  • WCAG implementation cost is usually over their budget
  • because of the lack of the basic WCAG guidelines knowledge customers assume that making the already existing website does not require much time working

Best solutions:

How do WCAG improvements for eCommerce look in practice?

The most important concerns for online shoppers with disabilities are screen readers, color blindness, motor disabilities, cognitive disabilities, more you may read here, but I will focus on ZoneStore eCommerce website WCAG features.

 

 

Recently we started the process of adjusting ZoneStore eCommerce website for WCAG guidelines and in the first step, we've added the most important accessibility features listed below. 

Keyboard navigation

The significant facility for people with motor disabilities who have trouble using the mouse to select page elements or navigate the website menu. This feature is the first one that needs to be implemented on the WCAG compliant eCommerce website. Each website element or at least the most important ones must be available to navigate using the keyboard.

keyboard web navigation

How to use keyboard shortcuts with the accessible template (WCAG/Section508)?

Skip menu

Skip menu is a kind of extending the functionality of a keyboard navigation. On the first website, loading customer may use the TAB key to jump to the selected website areas. Setting those areas is flexible you may add here any link at the eCommerce website backend - you may see several examples on the demo site.

skip menu wcag ecommerce

Accessibility tools

At the top of the website, we added gently looking tools for people with visual disabilities. Colorblind users have problems with distinguishing between colors with low contrast. Using this simple tools they may choose from 3 high contrast modes and one high mode. They will find here also the possibility to make fonts larger and change the layout width.

accessibility tools wcag ecommerce adjustments 

Plans for other WCAG improvements, now we are working on:

  • we need to implement some key navigation improvements for dj-catalog2 eCommerce software
  • despite the fact that many web accessibility tools report the wrong issues, we are going to make the demo of ZoneStore compatible with http://wave.webaim.org/ and fix reported errors and alerts. Some customers need to have a proof of WCAG compliance that may reflect in the positive web accessibility tool reports
  • for the default website page views, we are going to adjust colors to meet AAA level for contrast
  • we are going to adjust the demo site to show you that it's possible to prepare the content correctly for screen readers

Update on 8th November

JM ZoneStore has been updated and improved for WCAG and ADA accessibility. Please check details in this article in the section "WCAG & ADA accessibility improvements in the JM ZoneStore template"

WCAG widget for Joomla / WordPress