eCommerce

What Is ADA and Key Steps To Make Your Shopify Store ADA Compliant

October 6, 2020
 by 
Richard Emanuel
 • 
8
 min to read

When it comes to eCommerce and online ADA (Americans with Disabilities Act) guidelines, there are many factors to consider. With search engines cracking down on websites not following ADA protocols, it makes good business sense to educate yourself on them and apply the necessary changes to your site.

So what is ADA compliance? In short, ADA compliance ensures that your website is accessible to those with disabilities, which creates a friendly browsing experience for everyone. This article will delve deeper into what ADA compliance is and how to apply it to your website.

What is web accessibility?

Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with or access to websites on the World Wide Web by people with disabilities.

What is the purpose of web accessibility for the user?

About 56.7 million people in America consider themselves disabled in some way. That’s nearly 20 percent of the U.S. population. The purpose of ADA laws is to ensure inclusion (equal access and equal opportunity) so this population can have access to websites with minimal frustration.

Why do eCommerce merchants need to be aware of web accessibility?

Accessibility is becoming the new standard for all websites, so it should be considered as part of the overall user experience. If you’re a merchant who’s not compliant, you not only risk losing many potential customers but risk being sued, as well. There are people out there who take the time to find sites that are not compliant and then take legal action against them. You don’t want to be a target.

What can an eCommerce merchant do to jump-start their journey towards web accessibility?

First and foremost, read and gain a basic understanding of the core accessibility rules (ADA, 508, W3C, and WCAG). Relate these laws back to the different types of disabilities (color blindness, different levels of blindness, deafness, etc.) to build empathy for the limitations and frustrations of these users on the web.

To put them into practice, it’s important to consider accessibility principles from the design phase all the way through your site’s development process. When you make site edits in the future, you must make sure none of your accessibility features are broken by newly implemented code.

In the beginning, it’s all about gaining information about your site’s accessibility pain points. Here are some good tasks to start with:

  • Add alt text to all your images
  • Make sure all forms and PDFs are compliant
  • Add a statement to your values about your goal of becoming ADA compliant (be transparent) while you work on an actual policy
  • Add a place for accessibility feedback on pages (suggest app). We like A11yBar, a widget for Shopify sites that adds an accessibility statement, crucial features and collects valuable feedback from users directly on any page.
Icons relating to Jump-start towards web accessibility; image alt text descriptions, compliant forms and documents, ADA statement of values

What is the WCAG?

WCAG stands for Web Content Accessibility Guidelines. It’s a series of recommendations and best practices for making your website useful to all of your users, regardless of disability.

WCAG is built around four core accessibility principles: Perceivable, Operable, Understandable, and Robust.

  • Perceivable: Some of your users may have difficulty with one or more of their senses, making them reliant on assistive technology to browse your website. With WCAG 2.0, you can make sure that users can perceive all the information on your website.
  • Operable: Some users may have motor difficulties, which means they use their keyboard to navigate. Some users who have sight impairments often prefer to use a keyboard rather than a mouse, too. Ensure good keyboard-only navigation, avoiding setting time limits for your users and help them out if they make errors on forms.
  • Understandable: Your website must use clear terms, have simple instructions and explain complex issues. You must also make your website function in a way that your users understand by avoiding unusual, unexpected or inconsistent functions.
  • Robust: Your website must meet recognized standards, such as using clean HTML and CSS. This minimizes the risk of your users relying on technology that cannot correctly process your website.

What does it mean to be level A compliant?

This is the beginner/basic level of compliance and covers only the most necessary accessibility features. Some of these include:

  • Creating content that may be presented multiple ways (i.e. by varying reading sequence, providing multiple layouts, alternating sensory characteristics, etc.)
  • Ensuring all content functionality is accessible through keyboard controls and does not require a mouse
  • Presenting content in a logical, structured way and giving users control over moving content (i.e. pause, stop, hide)
  • Adding the ability to skip content for those who use the read-aloud feature. This prevents repeating content like logos and menus from being read repetitively in favor of skipping to the main content
Icons relating to A compliance. Two e-commerce views on collection pages: list view, grid view

What does it mean to be level AA compliant?

Considered the sufficient level of ADA compliance, level AA is the intermediate level of compliance. It includes level A conformance plus the added luxury of additional accessibility features for disabled users browsing your website.

Some of the accessibility requirements for level AA compliance include:

  • Live videos must have captions
  • Text should be resizable by 200% without loss of features or content on page
  • Headings and subheadings are used to break up pages for easier reading
  • Users should be notified when the language on a page changes
  • Navigation is consistent in location and order on all pages
Icons relating to AA compliance; Closed Captioned Videos, Text Enlarged up to 200%, Language Notifications

What does it mean to be level AAA compliant?

This is the most advanced level of accessibility compliance.

Some of the accessibility requirements for level AA compliance include:

  • Make sure the contrast between your text and the background is at least 7:1
  • Offer users a range of presentation options. Allow users to choose from optional views. (i.e. color contrast, an alternative simplified layout, etc.)
  • Do not have any time limits, so none of the content expires or is unavailable after a certain amount of time.
  • Provide users with detailed instructions and help wherever applicable (i.e. forms)
Icons relating to AAA compliance; 7:1 color contrast, no time limits on website, provide detailed instructions where applicable.

Why is it important for companies to be ADA compliant?

There are a number of reasons companies should adhere to ADA compliance. Not only will it stop users from suing you (which is a great reason to follow along), but it also helps with your site’s overall user experience. Why wouldn’t you want your site to be easy to navigate and understand for all of your users? Further, many compliance practices go hand in hand with SEO best practices, which will improve your website’s overall performance among all users, not just those with disabilities.

While there are three known levels of ADA compliance, it is basically required at this point to meet the level A compliance guidelines. All in all, following ADA guidelines will make your website user and search-friendly as well as helping those with disabilities have the utmost quality experience.

Even big companies like Apple are stepping up their accessibility game with their latest iOS 13 update. From voice control to voice gesture, Apple is working to accommodate the masses. For most companies, including powerhouses like Apple, achieving the ideal level of compliance will be an ongoing process.

Our take

Following ADA protocols will only help your website’s presence in the long run. Not only will you cater to more people (which is always a plus), but you’ll also be practicing good online etiquette. We strongly believe striving to achieve ADA compliance will help ensure that your eCommerce site is a reputable and trustworthy one that helps users find and buy what they’re looking for.

As our company grows, our commitment to accessibility is twofold: first, to improve our own user experience for visitors with disabilities, and second, to stay up to date on the latest ADA developments and best practices to help our clients provide a meaningful online experience for all users.

Part II: 10+ Crucial Steps to Become ADA Compliant

Now that you have a basic understanding of ADA compliance, your next question is probably ‘How do I become ADA compliant?’ Here, we’ll share some of the most important steps toward achieving ADA compliance for users with disabilities on your eCommerce website.

What’s the truth about accessibility widgets? Do any of them work?

Yes and no. We generally view accessibility widgets as a positive thing, though they are not a full solution. While there are many tools out there that will help you take the right steps toward achieving ADA compliance, they should not be used as a be-all, end-all approach.

One accessibility widget we like is Accessibility Enabler. This is a suite of accessibility tools that help people with disabilities to consume and navigate site content in an efficient way. After installation, any visitor on the site can see an accessibility toolbar and change the setting as required for them. As we mentioned, this only HELPS you get to your goal, but DOES NOT make you compliant.

Be aware of time-based promotions

Level A compliance requires you to offer users a chance to turn off or extend time limits (for example, a countdown clock that offers a discount for purchasing within a certain amount of time).

At Level AAA, this guideline requires that you do not set time limits at all, with two exceptions: 1) the time limit is due to real-time events, like bidding in an auction, and 2) your content is a live video stream.

What does ADA say about pop-ups and quick-view?

The best thing you can do is eliminate all interruptions by default. Allow your users to interact with webpages naturally and don’t try to surprise or manipulate them. If you can’t capture your users’ interest without a pop-up, you have bigger problems than Level AAA compliance.

If you must use a pop-up, make sure that keyboard focus is on the window-closing ‘X’ icon in the corner that closes the pop-up. This means keyboard users can easily close the new window. When they do close it, return focus to the place on the page they were at before the pop-up appeared.

Exceptions to this rule include warnings about a user’s health, safety or the security of their data or property.

In simple terms, what does it mean for an eCommerce site to be accessible?

An eCommerce website should keep a couple of things in mind when looking to follow a good ADA structure:

  • All of your users should be capable of understanding what your site has to offer
  • Your site should be operable by all users, including all elements
  • Your website is up to date with the latest in technology and accessible features
  • Your website conforms to ADA guidelines on both mobile and desktop platforms

What are some requirements for video content that should be considered?

  1. Provide text alternatives for non-text content
  2. Provide an alternative to video-only and audio-only content
  3. Provide captions for videos with audio
  4. Video with audio has a second alternative
  5. Don’t play audio automatically
  6. Provide user controls for moving content

What are the requirements and considerations for CTAs?

  1. Don’t use a presentation that relies solely on color (level A)
  2. The contrast ratio between text and background should be at least 4.5:1 (level AA)

What’s the rule for color swatches, like products that come in multiple colors?

Include words that say what the color or pattern is. This can be written next to the swatch or achieved via a hover. Swatches also need alt text for screen readers.

What are the next steps?

As with any goal, there needs to be an assessment of where you and your website stand and a plan of action to move your goal forward. The best way to achieve compliance is to first test your site according to WCAG guidelines and examine what elements may cause frustration to some of your users.

The second step is to create a checklist of necessary changes and tasks that should be included with each website update; push updates out based on the priorities for your users. Here is a WCAG 2.0 checklist that we find to be a great starting point.

It’s important to remember that becoming compliant is not a destination, but a journey. As you run maintenance on your site, remember to periodically check WCAG features and continually explore areas of your site that can be improved.

Richard Emanuel
Rich, the CEO of Parkfield, is a direct marketing pro with a decade of experience helping companies build, grow, and re-imagine their businesses. Rich focuses on using data and technology to create marketing solutions that capitalize on business opportunities and drive growth.
Message me

Download eBook

Access our free guide to CRO and we’ll take you through the whole process, step by step. Enter your email below to get started.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.