You are on page 1of 11

ADA and e-Commerce

Ashim Roy
19th May 2020
ADA is an acronym that has been in use for more than 100 years. For instance, American Dental
Association (ADA) is a 150-year-old professional organization and it has absolutely nothing to do with
e-commerce. Similarly, ADA is a programming language that too has nothing to do with e-
Commerce.

Lately, every stakeholder in e-commerce ecosystem is talking about ADA and ADA compliance.
What is ADA again? Americans with Disabilities Act!

As an e-commerce solution provider, it is our responsibility to stay abreast of the legal and regulatory
requirements and be knowledgeable about ADA so that we can ensure that solutions we present
to our clients are ADA compliant. A professional disclosure is due at this point – an ADA compliant e-
commerce website is equivalent to bug-free software. A modern-day utopia! However, a lot more
can be done to ensure that websites are ADA friendly. Along with this there is also the matter of
improving accessibility for individuals with visual and hearing impairments.

The purpose of this white paper is to create high level understanding of ADA requirements from
implementation point of view.

1. What is the ADA?

The Americans with Disabilities Act (ADA) requires businesses to make necessary changes and
improvements to their websites for individuals with disabilities.

The ADA is a civil rights law (1990) that was implemented to protect individuals with disabilities from
discrimination in all areas of public life.

Figure 1: E-Commerce and ADA Compliance

In 2010, the US Department of Justice issued an Advanced Notice of Proposed Rulemaking stating
they were going to amend the language in Title III of the ADA to ensure it would also apply to website
accessibility.

White Paper – ADA & E-Commerce 1


Title I and II of the ADA go over guidelines for making websites accessible to individuals with
disabilities.

The focus of ADA has been largely in the area of physical accommodations and accessibility;
however, the extended guidelines and requirements deal with ensuring that website content is
accessible to all users. ADA mandates that websites must be accessible to individuals with
various disabilities or impairments. Web accessibility addresses the needs of every website
visitor to achieve an optimal level of usability and ADA compliance. Many people browsing
the web have a permanent disability (visual, mobility or neurological impairment), or a
temporary impairment such as a broken arm, broken or lost eyeglasses, and so on.

This essentially means that e-commerce sites need to make improvements to text, font, text sizes,
screen readers and alternative assistance technology for every to have better access to the site/
content.

For instance, an exceptional, accessible website has an informative UI/UX, user-friendly features such
as text and videos, closed captioning, as well as alternative modifications to make content more
accessible to individuals who are blind, deaf, or often navigate content by voice, through screen
readers, or other assistive or alternative technologies.

The U.S. Department has stated that while the ADA doesn’t specifically state or address the question
of web accessibility, the language is still broad enough to include websites as part of business
operations, according to the Bureau of Internet Accessibility.

The international nonprofit World Wide Web Consortium (W3C) produces


recommendations for making websites fair and equally accessible for the highest number
of people possible. Their Web Content Accessibility Guidelines (WCAG) 2.0 offer clear
guidance for web developers to achieve ADA compliance.

2. Web Content Accessibility Guidelines (WCAG)

Common standards for web content accessibility are known as The Web Content Accessibility
Guidelines or WCAG.

The U.S. Department of Justice (DOJ) often refers and cites recommendations from WCAG as a
guide for web content standards for public websites. The DOJ essentially oversees and manages the
ADA requirements. In January 2018, the new federal regulations went into effect. This means that all
federal institutions’ websites are required to meet AA compliance on all items in WCAG 2.0.

White Paper – ADA & E-Commerce 2


Figure 2: Web Accessibility and WCAG

The WCAG 2.0 is a technical standard that offers standard guidelines and criteria to measure the
usability and accessibility of websites using POUR:

Perceivable
Is the content easily perceivable? This criterion helps content producers make sure their media is
usable by all. It is important to create and help users easily navigate content across the website. This
includes providing audio descriptions and alt text.

Operable
Is the website fully operable? One must ensure that the functionality of the website doesn’t create
problems for users. In order to check if the site is operable, it is necessary to understand different
methods used by end-users for accessing and interacting with the website - keyboard, mobile, voice
command or other means.

Understandable
Is the content on the site easy to understand? It is important to ensure that the text on the site is
readable, pages are logically organized, and multiple languages are supported.

Robust
Entails guidelines to ensure a website’s code follows current web standards.

The figure 3 below shows some of the common disabilities. The e-Commerce site should be designed
such that people with these disabilities are not denied access to the website.

White Paper – ADA & E-Commerce 3


Figure 3: Examples of Some Common Disabilities

3. Who Needs to Be Compliant?

The ADA requires businesses to provide ALL their customers with access to the same services,
including websites, apps, and electronic media. Aiming for level AAA compliance is ideal but being
AA compliant is generally acceptable.

Additionally, the ADA applies to all local, county, state, and federal government agencies; privately
run companies that have 15 or more employees; and non-profit organizations that have 15 or more
employees that operate for the benefit of the general public. The figure 4 below shows the 3 WCAG
compliance levels.

Figure 4: Three Levels of WCAG Compliance

This section provides further details of specific sections of the WCAG 2.0 and related compliance
requirements.

White Paper – ADA & E-Commerce 4


WCAG 2.0 checklist Level A – Basic Requirements

Guideline Summary

1.1.1 – Non-text Content Provide text alternatives for non-text


content

1.2.1 – Audio-only and Video-only (Pre- Provide an alternative to video-only and


recorded) audio-only content

1.2.2 – Captions (Pre-recorded) Provide captions for videos with audio

1.2.3 – Audio Description or Media Video with audio has a second alternative
Alternative (Pre-recorded)

1.3.1 – Info and Relationships Logical structure

1.3.2 – Meaningful Sequence Present content in a meaningful order

1.3.3 – Sensory Characteristics Use more than one sense for instructions

1.4.1 – Use of Color Don’t use presentation that relies solely on


color

1.4.2 – Audio Control Don’t play audio automatically

2.1.1 – Keyboard Accessible by keyboard only

2.1.2 – No Keyboard Trap Don’t trap keyboard users

2.2.1 – Timing Adjustable Time limits have user controls

2.2.2 – Pause, Stop, Hide Provide user controls for moving content

2.3.1 – Three Flashes or Below No content flashes more than three times
per second

2.4.1 – Bypass Blocks Provide a ‘Skip to Content’ link

2.4.2 – Page Titled Use helpful and clear page titles

2.4.3 – Focus Order Logical order

2.4.4 – Link Purpose (In Context) Every link’s purpose is clear from its context

3.1.1 – Language of Page Page has a language assigned

White Paper – ADA & E-Commerce 5


3.2.1 – On Focus Elements do not change when they receive
focus

3.2.2 – On Input Elements do not change when they receive


input

3.3.1 – Error Identification Clearly identify input errors

3.3.2 – Labels or Instructions Label elements and give instructions

4.1.1 – Parsing No major code errors

4.1.2 – Name, Role, Value Build all elements for accessibility

WCAG 2.0 checklist Level AA – Intermediate Requirements

Guideline Summary

1.2.4 – Captions (Live) Live videos have captions

1.2.5 – Audio Description (Pre-recorded) Users have access to audio description for
video content

1.4.3 – Contrast (Minimum) Contrast ratio between text and


background is at least 4.5:1

1.4.4 – Resize Text Text can be resized to 200% without loss of


content or function

1.4.5 – Images of Text Don’t use images of text

2.4.5 – Multiple Ways Offer several ways to find pages

2.4.6 – Headings and Labels Use clear headings and labels

2.4.7 – Focus Visible Ensure keyboard focus is visible and clear

3.1.2 – Language of Parts Tell users when the language on a page


change

3.2.3 – Consistent Navigation Use menus consistently

3.2.4 – Consistent Identification Use icons and buttons consistently

3.3.3 – Error Suggestion Suggest fixes when users make errors

White Paper – ADA & E-Commerce 6


3.3.4- Error Prevention (Legal, Financial, Reduce the risk of input errors for sensitive
Data) data

WCAG 2.0 checklist Level AAA – Advanced Requirements

Guideline Summary

1.2.6 – Sign Language (Pre-recorded) Provide sign language translations for videos

1.2.7 – Extended Audio description (Pre- Provide extended audio description for
recorded) videos

1.2.8 – Media Alternative (Pre-recorded) Provide a text alternative to videos

1.2.9 – Audio Only (Live) Provide alternatives for live audio

1.4.6 – Contrast (Enhanced) Contrast ratio between text and


background is at least 7:1

1.4.7 – Low or No Background Audio Audio is clear for listeners to hear

1.4.8 – Visual Presentation Offer users a range of presentation options

1.4.9 – Images of Text (No Exception) Don’t use images of text

2.1.3 – Keyboard (No Exception) Accessible by keyboard only, without


exception

2.2.3 – No Timing No time limits

2.2.4 – Interruptions Don’t interrupt users

2.2.5 – Re-authenticating Save user data when re-authenticating

2.3.2 – Three Flashes No content flashes more than three times


per second

2.4.8 – Location Let users know where they are

2.4.9 – Link Purpose (Link Only) Every link’s purpose is clear from its text

2.4.10 – Section Headings Break up content with headings

3.1.3 – Unusual words Explain any strange words

3.1.4 – Abbreviations Explain any abbreviations

White Paper – ADA & E-Commerce 7


3.1.5 – Reading Level Users with nine years of school can read your
content

3.1.6 – Pronunciation Explain any words that are hard to


pronounce

3.2.5 – Change on Request Don’t change elements on your website until


users ask

3.3.5 – Help Provide detailed help and instructions

3.3.6 – Error Prevention (All) Reduce the risk of all input errors

4. Making Websites Accessible to All

The ADA has compiled a helpful toolkit that businesses should consider reviewing to help ensure their
website(s) are accessible. The ADA considers and defines website accessibility as having the
following elements: webpage, website, web browser, html, screen reader (computer program that
speaks written text), html tags, “longdesc” tag, refreshable Braille display, among other features for
accessibility and usability.

The ADA has compiled a list of general problems or issues that certain websites have that may pose
a barrier to individuals with disabilities, along with solutions for accommodating and making
changes:

§ images without text equivalents


§ documents not posted in an accessible format
§ specifying colors and font sizes
§ videos and other multimedia lack accessible features

It’s important that enterprises identify any other additional barriers that may exist for individuals with
disabilities when it comes to website accessibility. If the website is not currently optimized while
keeping ADA standards in mind, it’s important to strategize and create a comprehensive plan for
making the current web content accessible for all individuals.

Here are some ways to improve the website, according to ADA:

§ Help users be a part of the user-experience – this includes writing a call-out asking for user
input on how accessibility can be improved. Create a comments or suggestions area
where individuals can provide their thoughts.
§ Let visitors know that the site is undergoing modifications and accommodations to adhere
to ADA compliance requirements.
§ While making content changes, one should also make text and image changes to match
new images in the “alt tags.”
§ Make sure that the team is trained and up to date with the latest ADA-compliance rules. It
may be a good idea to have awareness sessions on ADA’s “Accessibility of State and Local

White Paper – ADA & E-Commerce 8


Government Websites to People with Disabilities” or any other additional resources for ADA-
compliance.
§ It is always a good idea to have an outreach program towards disability rights organizations
and get feedback about the website.

Understand that your website will need alternative ways to access information and services provided
on your website.

5. High Level Checklist for ADA Compliance

The following checklist may be used as a general guide for thinking about how to improve the
website:

§ Ensure all buttons, links, and labels have a readable description


§ Make sure links and elements have a visible focus style
§ Ensure all image elements have an alt tag
§ Fix missing alt tag from search results images
§ Fix missing alt tag in brand carousel images
§ Provide a skip link to allow users using screen readers and controls to skip to the important
parts of the pages
§ Ensure site is usable with 200% zoom
§ Check contrast for all major elements (header/footer/links/content)
§ Check if site works on mobile and is functional in portrait/landscape
§ Ensure enough space between links for mobile usability
§ Add Accessibility Statement to Website
§ After all the ADA tasks are completed, Absolute Web will work to ensure proper rendering.
This includes the following tasks:
§ Quality Assurance Testing UX/UI – Cross-browser (Chrome, Edge, Safari, Firefox)
§ Cross-device (Mobile, Tablet, Desktop)

There are several compliance tools available and many of them are absolutely free. The links
below provide a list of compliance tools.

• 508 Checker by Formstack


• A-Tester by Evaluera Ltd
• A11Y Color Contrast Accessibility Validator by A11Y Company
• A11Y Compliance Platform by Bureau of Internet Accessibility
• a11y-checker by Muhannad Abdelrazek
• a11y.css by Gaël Poupard
• A11ygato by Orange
• a11yTools Extension for Safari macOS by Paul J. Adam
• a11yTools for iOS by PaulJAdam.com
• AATT (Automated Accessibility Testing Tool) by PayPal
• Access Alchemy by Level Access
• Access Analytics by Level Access
• Access Assistant Community Edition by Level Access
• Access Continuum by Level Access

White Paper – ADA & E-Commerce 9


• Access Continuum Community Edition by Level Access
• Accessibility Bookmarklets by University of Illinois and Pixo
• Accessibility Checker by CKSource
• Accessibility color wheel by Giacomo Mazzocato
• https://www.w3.org/WAI/ER/tools/

6. ADA and Litigation

There’s been an increase in the number of lawsuits against several businesses and governments for
their website having violated the ADA’s guidelines.

An organization should take the necessary steps to prevent litigation by familiarizing the team with
guidelines created by WCAG 2.0 and using resources and tools on the internet to check website for
ADA compliance.

One of the first things any development team should do is create a general checklist to see if the
website adheres to and provides accommodations for individuals with disabilities. First item to check
if the website has “alt text,” which is a requirement under WCAG 2.0, according to the Bureau of
Internet Accessibility. Alt text helps describe a visual image for those with visual impairments.

In an article in 2018, Forbes reported that there were nearly1,000 lawsuits related to ADA compliance.
In 2019, Beyoncé Knowles’ company, Parkwood Entertainment, had to defend a class-
action lawsuit that it violated ADA compliance. For PFSW it is critical to be ADA compliant so
that existing and future clients do not get hit by lawsuits.

7. Online Resources

There are several resources and websites that can help automate or let you know how accessible
your website is:

§ https://www.boia.org/
§ https://www.webaccessibility.com/
§ https://dynomapper.com/features/website-accessibility-testing
§ http://pauljadam.com/bookmarklets/
§ https://www.dbswebsite.com/blog/ada-compliance-starts-with-accessible-design/
§ https://dynomapper.com/blog/27-accessibility-testing/246-top-25-awesome-
accessibility-testing-tools-for-websites
§ https://knowbility.org/blog/2018/WCAG21-intro/
§ https://www.cmarix.com/how-to-make-your-website-wcag-compliant-principles-and-
checklists-to-follow/
§ https://www.werkbot.com/blog/ada-compliance-a-vs-aa-vs-aaa
§ https://adally.com/overview-of-wcag-and-what-changed-in-2-1/
§ https://www.3playmedia.com/2018/06/21/know-wcag21/
§ https://www.absolutewebservices.com/ecommerce-guide-frequently-used-terms-to-
know/
§ https://ecommerceguide.com/guides/what-is-ecommerce/

White Paper – ADA & E-Commerce 10


§ https://www.thelimeloop.com/
§ https://medium.com/@lsnrae/the-state-of-accessibility-in-e-commerce-fc97b9bad3a2
§ https://acornsign.com/the-history-of-the-americans-with-disabilities-act-ada/
§ https://www.werkbot.com/blog/ada-compliance-a-vs-aa-vs-aaa
§ https://knowbility.org/blog/2018/WCAG21-intro/
§ https://www.wuhcag.com/wcag-checklist/
§ https://whiteboard-mktg.com/are-you-required-to-make-your-website-ada-compliant-
whiteboard-marketing/
§

While automated tools can pick up and identify simple problems, manual testing is recommended
to make sure the team becomes more knowledgeable about meeting necessary requirements for
ADA website compliance.

8. ADA compliant Websites Examples

1. https://www.parrapark.com.au/
2. https://www.wesleymission.org.au/
3. https://www.cramfoundation.com.au/

White Paper – ADA & E-Commerce 11

You might also like