What Is ADA? Key Steps to Make Your Shopify Store ADA Compliant

What Is ADA? Key Steps to Make Your Shopify Store ADA Compliant
Written by
Richard Emanuel
Published on
October 6, 2020
Read time

When it comes to ecommerce and online, Americans with Disabilities Act (ADA) guidelines, there are many factors to consider. 

What we do know is clear: offering an accessible online experience plays an important role in enabling a company to create a complete customer experience.

And with more attention on accessibility than ever before, it makes good business sense to educate yourself on the ADA’s guidelines as you work to apply them to your website.

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? Your Biggest Accessibility Questions Answered

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.

What can an ecommerce merchants 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
  • Simplify the checkout stage of the customer journey. For instance, each page must be designed with the proper structure.
  • 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 Userway, a powerful Shopify accessibility solution that automates key accessibility requirements.

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.1, 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.

Consult the ADA’s official documentation on the WCAG for the latest developments, as the guidelines are being updated continually. You can also see Section508, which is tailored to government and educational institutions.

Understanding the Different Levels of Accessibility Compliance

Accessibility is defined through three levels of compliance, which include Level A, AA, and AAA. Level 

  • Level A is the minimum level required and is considered the least strict.
  • Level AA is what many organizations strive to be, and is often defined as “reasonably accessible.” Level AA includes all Level A requirements. 
  • Level AAA includes all Level A and AA requirements, and includes extremely strict guidelines that make it challenging to comply with.

When it comes to accessibility compliance, we often recommend companies strive to become Level AA compliant.

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

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. 

If you’re trying to achieve Level AA, we recommend having someone assist you with creating an accessibility statement and providing additional support as needed.

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

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)

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.

In fact, there are over 61 million people with disabilities in the United States alone. Why wouldn’t you want your site to be easy to navigate and understand for all of your users? You have a chance to increase your market reach and expand your audience.

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 on web accessibility

Overall, achieving web accessibility is all about improving the user experience. Everything from video and audio captions to alt tags for images to links and buttons need to be geared towards making the customer journey better. That’s really all it comes down to: when we talk about web accessibility, we’re really talking about the user experience.

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.

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. 

Are you looking to improve your website’s accessibility? Leverage Parkfield Commerce’s team of accessibility experts to audit your ecommerce website and discover where actionable improvements can be made.

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

The disabled community currently does not think highly of widgets because using too many of them often results in complicated overlays and plugins that can make navigating a website unnecessarily difficult. A better alternative is to go for code solutions that contribute to a simpler user experience.

That being said, we occasionally view accessibility widgets as a positive thing, though certainly not as 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 AA 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.

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
  • Navigation must be easy regardless of what device is used (i.e. accessible by keyboard, mouse, or touch)
  • 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 visual 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. Use professional caption services to manually correct the video SRT script for your videos
  4. Ensure no videos play automatically
  5. Transcribe audio content into text
  6. Video with audio has a second alternative
  7. Don’t play audio automatically
  8. 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)
  3. Link and button labels must describe what they do. Links go to webpages, while buttons perform actions like submitting an input

What’s the rule for color swatches for products with 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.

How should you handle the different disabilities?

For legally blind or blind users (think about senior citizens here too), it should be just as easy for them to shop, checkout, and interact with your site as anybody else. To that end:

  • Pick contrasting colors. Avoid colors that are too light or those that blend in too well with the background.
  • Avoid small fonts or strange typefaces that are hard to read. For dyslexic users, avoid text kerning that’s too tight, aim for simple designs, and keep the content of the text readable.
  • When it comes to mobile browsing, make buttons especially large to make tapping them easier. Avoid the use of swiping whenever possible, or at least provide an alternative way to navigate.
  • If you have videos on your website, ensure they are captioned by professionals

Last but certainly not least, develop your website so that it supports the tools that some people rely on. The disabled may use certain devices to access the web, for instance.

Looking to Create an Accessible Web Experience?

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.1 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.

Looking for help improving your website’s accessibility? Parkfield Commerce can help. Get in touch today and see how our team of accessibility experts can help you create a more accessible digital experience for your customers.