Magento and ADA Compliance: All You Need To Know

It has been more than 30 years since the introduction of the American With Disabilities Act (ADA), which was signed by the former president of the USA, George HW.Bush on July 26, 1990. The law was introduced to improve the quality of life and making public places (including websites) more accessible to millions of physically handicapped Americans. However, these benefits haven’t reached the technological world yet.

Although most of the e-commerce store boasts for delivering a great customer experience, they are still lacking accessibility for disabled persons. It prevents them from typing, clicking a mouse, or even seeing images and website content. The rules are the same for the Magento e-commerce stores. As per the regulations of ADA, the websites whether e-commerce store or not, should be accessible by people of all abilities. Many big companies have faced lawsuits for not taking a step towards ADA accessibility. In the last 4 years, the number of lawsuits based on ADA has seen a sharp increase, with tripling between 2017, 2018, and 2019. In the US alone, there are more than 50 million people with disabilities, hence it is imperative for your online store website to comply with the law.

While ADA compliance used to apply for commercial or physical locations, now most of the websites are being scrutinized and if they aren’t ADA compliant then the online retailers have to pay huge amounts of fines for violating ADA.

Although ADA compliance is not required by the law, ensuring your website is ADA compliant can save you from costly lawsuits. Thus, in this article, we will be knowing every aspect of ADA compliance, why it is important for your Magento store, and much more.

What Is ADA Compliance?

In 2010, the Department of Justice (DOJ) published the ADA standards for accessible design which sanction that the physically capped people should be able to enjoy goods, services, facilities, privileges, advantages, accommodation, to the fullest.

What Needs To Be ADA Compliant?

Until a few years ago, ADA compliant was limited to commercial and physical places and places such as:

• Entertainment places including theatres, and concert halls
• Restaurants, pubs, or eateries
• Small and medium business of every industry niche
• Inn, hotel, motel, or any other place of lodging
• Recreation places such as museums, parks, zoos, galleries, etc.
• Exercise or recreation places such as Gyms, health spa, bowling alley, etc
• Retail stores and other large enterprises

Should The Websites Need To Be ADA Compliant?

ADA has affected almost every type of business in physical reality. At the time of its introduction, websites and the internet were not mentioned due to the infancy of the internet in 1990. It was impossible to predict the proliferation of the internet and website at that time. But as internet usage has become more prevalent and now websites have become a medium for the business, the applicability of ADA to web accessibility began to change.

Since 2017, a clear consensus has emerged that ADA should cover the online dimension as well. Disability rights activists, legal scholars, and court rulings have agreed that websites, internet portals, and transactional online websites should be accessible for people with disabilities.

ADA Web Accessibility Lawsuits

The US judicial circuits all are in general agreement that having a claim for discrimination under ADA will require including these criteria:

• A person is disabled within the meaning of the ADA
• The defendant should be a private entity that owns, leases, or operates a place of accommodation

In the last few years, we are observing a wave of legal proceedings against companies whose websites aren’t ADA compliant. These companies are being sued for not providing a website that meets ADA standards. For e.g. a judge awarded $3.7 million in attorney’s fees and costs to the plaintiffs in the case of The National Federation of the Blind vs. Target Corp.

How Can A Company Comply With The ADA?

The ADA motivates for the self-regulation of the accessibility standards and DOJ (Department of Justice) has developed regulations for providing guidance to the entities covered by the ADA. The organizations have to audit the ADA compliance using the guidelines of WCAG 2.2 level AA guidelines.

What Is WCAG?

WCAG stands for the Web Content Accessibility Guidelines. These guidelines are defined for the web accessibility policy and used as a standard for web accessibility in the US and in many countries across the world. It was created by the World Wide Web Consortium, or popularly known as W3C. It is an international community that develops open standards for ensuring the growth of the internet.

The issue of accessibility is amongst the first one which W3C addressed. W3C created WCAG which was published in 1999. It was focused on how to make web content more accessible for people who are having disabilities such as visual, auditory, physical, speech, cognitive, language, learning, and neurological.

Principles Of WCAG

If you go through the entire WCAG, then find that the guidelines are huge and complicated, with many different requirements. However, there are 4 major principles:

• Perceivable
• Operable
• Understandable
• Robust

We will discuss each of these in more detail.

1. Perceivable

The UI (User Interface) and information should be presented in a manner that the users can perceive the content on the site through the senses of sight, sound, and touch. It includes video captions, text on the site which can be modified for contrast, color, size, or other factors which make it easy to read.

Text Alternatives:
Providing text for a non-text format that users may need like large print, Braille, speech, symbols, or any other simple language.

Time-based Media:
For the time-based media, there should be an alternative. There are 3 different compliances for this:

• Level A compliance: There will be prerecorded audio or video content for the audio-only and video-only content respectively.
• Level AA compliance: Providing all the live audio content with captions
• Level AAA compliance: Providing sign language interpretation for the audio content.

2. Operable

It is focused on how the user can use the site i.e. whether the user can operate on-site with a keyboard, sight-assisted navigation or any other method versus just relying on the mouse.

Keyboard Accessibility:
The website should be fully accessible through a keyboard interface, without any specific timing of the keystrokes. Mouse input methods are acceptable as long as they can be accomplished through the keyboard as well.

Sufficient Time:
The users should get sufficient time to read and interact with the content. If there is any time limit for content then provide at least one among these options:

• Ability to turn off the time limit before encountering it
• Ability to increase the time limit to at least ten times before encountering it
• The user should get a warning at least 20 seconds before the time ends and then the user can increase the time limit to at least ten times by a simple action such as pressing the spacebar.
• The exception to this if the time limit is a required part of a real-time event and no alternative to the time limit is possible.

3. Understandable

On the basic level, the UI information and operation should be able to understand by everyone. Thus, there shouldn’t be any complicated instructions with limited use of jargon and technical terms.

Readability
The content on the site should be easy to read and understand. The default language can be programmatically determined. For AAA compliance, it will involve a mechanism for checking the expanded form or meaning of abbreviations.

Pronunciations
The user should be able to identify the particular pronunciations of the words where their meaning is not clear without the pronunciation. It also comes under AAA guidance.

Predictable
The webpage should be open and operate in predictable ways. For e.g., if any component requires focus, then there shouldn’t be a change of context. Also, the navigation should be consistent; navigational mechanisms that are repeated on multiple pages should occur in the same relative order.

Input Assistance
The users must get clear instructions for avoiding and correcting mistakes. It includes labels and instructions when any content requires the input of the user. If an error arises, it should be automatically detected and described to the user in text.

4. Robust

The content on the website should meet these two requirements. Usage of clean HTML & CSS code as per the industry standards, and compatibility with a wide range of user agents, including assistive tools and technologies.

Parsing:
If the content uses markup languages, there must start and end tags in the elements, and must be nested as per their specifications. There must be no duplicate attributes with unique IDs.

Name, Role, Value:
The UI elements must be able to determine programmatically including the names and roles.

Examples of WCAG ADA Compliance

Menus:

• The users can use the Tab key to navigate to the next element, and Shift + Tab for vice versa. Also, the focused element should be easy to identify with a focus ring (outline).
• The users can navigate the menu using arrow keys. If they reach the last item of the menu, then clicking on the right arrow key will navigate to the first item.
• It is possible to open drop-down menus using the Enter or down-arrow keys.
• Arrows keys for navigating within the drop-down menus for navigation
• Esc key can be used for closing the drop-down menus

Popups:

• Esc key can be used to close the popups.

Images:

• There should be an Alt attribute in all images. The alt tags describe the objects in the image in a proper manner.

Forums:

• There must be a “LABEL” tag in all the fields of a forum. It should be connected to every field by the “id” and the “for” attributes, or an “aria-label” attribute.
• There should be visual clues such as Asterisk(*), text, etc. in every field.
• An “aria-invalid” attribute should be present in every field for informing the readers whether the field is valid or invalid.
• If on submitting a form, errors arise, then using the keyboard those errors can be addressed, and the user must receive an explanation in visual form.
• If the form gets submitted successfully, then a blind user should be notified using an alert element or through other means.

Buttons:

• There must be text, title, or an aria-label on each button.
• Must be an actual “button” tag

Links:

• There must be text, title, or an aria-label on each button.
• Should be in a logical sequence, e.g. the read more link should be just below a paragraph
• Keyboard navigation must allow accessing the links
• There should be a visual indicator if the links will open in a new window
• Links must be noticeable on-page and look different from regular text.

Also Read: Magento Review with Features, Pricing & Functionality

Benefits Of ADA Compliant Magento Store

You will never regret spending a few hundred dollars in making your Magento store ADA compliant, as you will get a lot of benefits from that. It opens the door to new possibilities for your target visitors. You may be missing customers who want to use products or services but can’t access your site. It is highly frustrating for the users if they can’t access your site and degrade the reputation of your brand. Here are the other benefits:

1. SEO Benefits

Popular search engines such as Google or Bing give higher ranking to the ADA compliant sites when the search engine crawls the page. If you use Magento ADA compliant option like alternate text for the videos, audios, or pictures. More people will get access to the site. The other better SEO options include H1 headings, keyword-relevant titles, and transcribing audio files.

2. Brand Benefits

If your site is ADA compliant then it will increase the reputation of your brand among the customers. In today’s e-commerce world, there are a lot of competitors, thus to make yourself distinguish from others, you can give accessibility to the maximum users. If the customers can’t access your site, then they will leave your store. Making the site ADA compliant gives them a reason to stay and to return.

3. Avoid Legal Obligations

Many businesses don’t even know that if their site is not ADA compliant then they can face lawsuits. In 2018, more than 1000 lawsuits were filed over the ADA compliant obligations. By making accessibility changes in your website you can find the affected areas with the Emizentech team, you can avoid a lawsuit.

4. More Traffic & Conversions

Accessibility tools and widgets such as text for images, videos, or other content will not improve the access to the content but will also increase the traffic and improve the conversion rate.

Why Choose Us?

In this article, we have gone through in-depth detail of ADA compliance. At Emizentech, the best Magento development company in India, we are having expertise in making your site ADA compliant with all the accessibility fixes. We are leading in the e-commerce industry for more than 10 years. We don’t use any 3rd party extension, but our expert Magento developers will do every fix on their own. Contact us today for avoiding any legal lawsuit and making a better version of your Magento store.