• 3 People all viewing the same website on different devices thanks to WCAG 2.1 Accessibility for e-commerce

A Comprehensive Guide to WCAG 2.1 AA Accessibility for E-Commerce

Martine was a 62-year old online student who’d been hard of hearing since birth. The university she attends provides sign language interpreters and Communication Access Realtime Translators (CART) who provide realtime translation services on campus. She started experiencing difficulties when transitioning to online learning, where not all media was close captioned or provided a transcript.

The university became aware of this issue and is now working with a firm to provide captioning and transcriptions for all online content.

This is an example of an accessibility success story. Martine was able to continue and excel in her studies, thanks to accessibility services. Not only is this a nice thing to do, but it’s also the law. Ignoring the law and failing to make your site compliant can be expensive too!

WCAG 2.1 AA accessibility is the rules and regulations on how to make a website accessible for people with disabilities. We’re going to delve into the rules and laws around WCAG 2.1 AA Accessibility to show how you can make your website compliant.

Women are able to use the website on different devices

WCAG 2.1 AA Accessibility

WCAG 2.1 AA stands for the Web Content Accessibility Guide. It’s put together by the World Wide Web Consortium in an effort to make the Internet as accessible to as many people as possible.

Organizations that follow the WCAG 2.1 AA standard make content more accessible to people suffering from:

  • Blindness and low vision
  • Deafness and hearing loss
  • Limited mobility
  • Speech disabilities
  • Photosensitivity
  • Learning disabilities
  • Cognitive limitations

These guidelines make content more accessible to users of every different type of device. WCAG 2.1 AA standards must apply to desktops, laptops, tablets, and mobile devices. Following the WCAG 2.1 guidelines will often make your website more usable and useful for everybody.

The Four Principles Of Web Accessibility

The four principles of web accessibility state that web content needs to be perceivable, operable, understandable, and robust.


Content being perceivable means that information and user interface components must be presented in a way that users can perceive. This means it can’t be invisible to all of their senses.

In the instance of a seeing or hearing disability, that means making content perceivable via another sense.


Content being operable means that a user must be able to operate the interface.


Content being understandable means the user must be able to comprehend both the information as well as the interface for a website. The content or operation can’t be beyond their understanding.


Content being robust means that it can be interpreted reliably by a wide variety of user agents. That includes assistive technologies for interpreting content. It also means that content needs to continue to be accessible as user agents and technologies continue to evolve.

WCAG 2.1 AA Guidelines

Each of the four principles of WCAG 2.1 has pointers for implementation. These are known as the WCAG 2.1 AA Guidelines.

To make sure that content is perceivable, the website owner needs to provide a text alternative for non-textual content. You must also provide captioning and other alternatives for multimedia content. Content must be able to be presented in a number of different ways, including with assistive technologies, without losing meaning. Finally, you must make it easy as possible for users to hear and see the content.

To make content operable, all content must be made available from a keyboard. Users must have enough time to read and understand the content, as well. You must not use content that will cause seizures or other physical reactions in users, either. You must also help users find and navigate content. Finally, you must make it as easy as possible to use an input other than a keyboard.

For a website to be understandable, text needs to be easy to read and understand. Content must appear and operate in predictable ways. You must also help users avoid and correct mistakes.

Finally, for a website to be robust, it must maximize compatibility with current and future user tools.

WCAG 2.1 AA Accessibility For eCommerce

There are so many reasons why an eCommerce website should be accessible for as many people as possible, including users with disabilities. Firstly, it’s the right thing to do. Secondly, it’s a sound financial decision. You don’t want to turn away potential customers who may be ready, willing, and able to do business with you. According to a recent survey, $16.5 million was lost to British retailers due to insufficiently accessible websites in 2016 alone.

Failure to comply with WCAG 2.1 AA accessibility can also open you to legal actions. Between January 2015 and October 2017, over 700 lawsuits were filed pertaining to the Americans with Disability Act (ADA). A number of eCommerce websites have been the subject of ADA lawsuits. These include Kylie Jenner’s cosmetic company, Kylie Cosmetics, and the luggage company Bag’n Baggage.

Following the WCAG 2.1 AA Accessibility guidelines is an easy way to ensure your website complies with the ADA act. The Department of Justice has cited the previous version of the Accessibility Guidelines, the WCAG 2.0.

Some of the most common accessibility issues facing eCommerce websites include screen readers, color blindness, motor disabilities, and cognitive disabilities.

For content to be compliant with screen readers, information about your site’s structure and layout need to be made in text, as well. If you use colors to indicate statuses, such as placing a successful order, that needs to be made apparent in text as well.

Users who struggle with color blindness have trouble discerning between colors with low contrast. To make sure your eCommerce websites are accessible to visitors suffering from color blindness, text should have a minimum contrast of 4.5:1. If your products come in multiple colors, make sure to describe the colors with text.

To accommodate users struggling with motor disabilities, make sure elements on your website aren’t too close together. Finally, to make your website as navigable as possible for visitors with cognitive disabilities, use a formal product category hierarchy that’s as straightforward and easy to understand as possible.

Are You Looking To Optimize Your Website?

You want your eCommerce website to be accessible for as many visitors as possible. WCAG 2.1 AA accessibility is just one way we can make sure your website is functioning at peak performance.

If you want to find out how we can fine-tune your website and digital business, contact us today with any questions or to set up a consultation.

By |August 3rd, 2020|