Skip to content

Development

11 minute read

Our Secret to WCAG and ADA Site Compliance.

LAST UPDATED:

August 15, 2023

2023.04.04.Our Secret to WCAG and ADA Site Compliance
solar_system
Our Secret to WCAG and ADA Site Compliance

As a business, you make some decisions because they benefit your customers, while others are designed to protect your business legally. Building an ADA-compliant website falls into both categories.

According to the CDC, more than 60 million Americans live with some type of disability. That’s more than one in four adults. According to World Bank estimates, that number rises to one billion around the world. Following relevant disability guidelines ensures that your website is as relevant and beneficial to them as it would be to any other potential customer or client.

That’s one incentive. The Americans with Disabilities Act (ADA) also makes building an accessible website a legal necessity. While it doesn’t technically mention websites as part of its language, they have been deemed “places of public accommodations” under the law by a wide range of court rulings. Compliance is crucial to avoid potential lawsuits or settlements.

Making your web content accessible, in turn, means following WCAG, which is short for Web Content Accessibility Guidelines. More specifically, WCAG 2.1 is a set of individual rules that ensure your website is accessible for users with any type of disability.

So let’s dive in. Keep reading to learn not just why your business needs to care about ADA and WCAG but also how you can accomplish an ADA compliant site —with one option that might be simpler than you thought.

Chapter 1

Why is ADA Compliance Important?

We’ll explain the basics, but there’s always more to learn. ADA compliance has serious business benefits, not in the least because a significant portion of your users will appreciate it.

What is Website compliance?

First, we need to ask ourselves “What is website compliance?” Website compliance is described as “the state of observing and following all accessibility laws and regulations that apply to your website – should be an overall goal for your organization” by Essential Accessibility.com. One of these accessibility laws is Title II and Title III of the ADA which states that persons with disabilities cannot be discriminated against on the basis of their disability. By making your website and web content accessible this allows for equal access for all people.

Above is an example of our favorite ADA website compliance tool in action on our client Ag America’s website.

Who does ADA Web Compliance Apply to?

Under Title III of the ADA concerns public businesses while under Title II it specifically describes accessible websites and public accommodation. Meaning businesses must be able to serve people with disabilities by providing them access to web content in accommodating ways.

In terms of the World Wide Web, places of public accommodation would make businesses are responsible and to make sure their digital content follows best practices through the forms of mobile apps, webpages, any links, etc.

Is ADA Compliance Mandatory for Websites?

The technical answer to this question is “not necessarily” under federal, however, under local and state government there must be accessible websites. From both a legal and ethical point of view should offer web accessibility services through their websites as there are a number of benefits for doing so.
The best way of offering public accommodation is through following WCAG guidelines to create web accessibility for all. The success criteria will be shared later on but follow the guidelines laid out in WCAG 2.0 and WCAG 2.1 will help to make your website accessible and avoid legal action such as lawsuits.

The User Benefits of Website Compliance

We’ve established already just how common disabilities actually are in the general population. Millions of people might have trouble recognizing certain colors, reading small type, or seeing any of your visual content. Others might have limited use of their hands, increasing their difficulty to navigate around your site.

The general term for software that helps these users navigate the web is typically called assistive technology. It can include a wide range of platforms, including:

  • Screen readers
  • Eye tracking tools
  • Automatic contrast adjustments
  • Speech recognition software
  • And much more.

Globally, this is a $21 billion industry that is expected to top $31 billion by 2027. The rapid growth is only natural, considering how increasingly important the internet has become around the globe.

We’ll get into the exact question of what makes an ADA accessible website below. For now, the most important takeaway is that a website following WCAG and ADA guidelines is specifically designed for all common disabilities, and the technology accommodating them. It ensures that your website is just as beneficial for them as it is for all other segments of your audience.

Think about the opportunities that it brings, depending on the audience you target. A retailer targeting older populations might improve the online experience of more than 50% of its audience. But even a beauty brand, whose audience might skew younger, will still encounter users with disabilities who will appreciate the accommodations.

In short, visitors will appreciate a user interface that accommodates their needs, rather than forcing them to adjust to yours.

The Business Benefits of ADA Compliance

Those user benefits above, of course, are not purely philanthropic. Through making your website accessible by accommodating the needs of audiences with disabilities, you unlock the goodwill and purchase ability of one quarter of your target audience. That figure rises significantly depending on your target audience’s demographics.

This is an audience with an estimated disposable income above $600 billion. Its goodwill can easily translate to increased revenues for your business.
The connection between user and business advantages, as outlined above, is natural. But ADA compliance benefits your business even beyond happier, more approachable page visitors.

The most obvious business benefit is avoiding legal jeopardy, such as violating Title III. According to one analysis, 2019 saw more than 11,000 lawsuits related to ADA Title III violations. Over the past five years, that number has grown by an average of more than 20%.

It’s not just large or small businesses, either. Brands as well-known as Domino’s and the Golden State Warriors have been sued because their websites weren’t ADA accessible in recent years.

Finally, it’s a reputation issue. A lawsuit, or even a reputation for not sufficiently catering to audiences with unique needs can be as harmful as a reputation for the opposite can be beneficial. Especially in highly regulated industries of public-private partnerships, ADA compliance becomes a business benefit and potential differentiator from your competition.

So much for the why. Next, we’ll explore the how of creating site-wide ADA compliance.

Free Demo

Get a free demo to AccessiBe, our preferred ADA compliance tool for websites.

 
Chapter 2

What, Exactly, Makes Your Websites ADA-Compliant?

In almost every instance, lawsuits and judges, as well as the U.S. Department of Justice, have all pointed to a simple way to make sure that your webpages are ADA compliant: follow the WCAG guidelines.

So let’s dig in. First published by the University of Wisconsin-Madison, they’ve been continually updated to account for new research, web developments, and the current digital landscape. The most recent WCAG 2.1 prompts websites to follow guidelines in 4 categories, with the acronym POUR:

  • Perceivable
  • Operable
  • Understandable
  • Robust

Protip

Each of them deserves further explanation. We have actionable tips from the WCAG’s quick guide to achieve success in each category

Perceivable

Users with disabilities should be able to experience your webpages to its fullest success criteria. They might not be able to see the text, images, or video, so it’s all about providing alternative ways to consume your website’s individual pages.

How to Make Your Websites Perceivable

  • Create ALT text for any non-text content on your site. That ALT text should describe the media in simple words.
  • Anytime multimedia like video appears on your site, provide captions for users with hearing disabilities.
  • Create your text in a way that accounts for assistive technologies like screen readers. That includes actions like following a predictable intro-text-conclusion structure and avoiding text on images.
  • Use color as a nonessential design choice, ensuring that color-blind users can still navigate your site. For instance, a green button is not enough to convey ‘go’ without the word ‘go’.

Ensure that audio playing on your site is nonessential and can be controlled rather than auto-playing on your website.

Operable

This principle is simple: all users, regardless of any devices they might use, should be able to navigate your website and all features you have to offer them. In other words, no part of your UI should negatively impact UX, regardless of disabilities or assistive technologies used.

How to Make Your Websites Operable

  • Make sure that your website can be navigated with only a keyboard.
    Make sure that alternative inputs, like voice recognition or mouse only, are just as smooth.
  • Give users enough time to read and consume the content, avoiding tight time limits or fast autoscrolling.
  • Avoid any content that could cause seizures or audiovisual confusion.
  • Provide navigation assistance, through intuitive menus and alternative ways to navigate (such as an internal site search).

Understandable

This one is self-explanatory. Users with disabilities should be able to understand all content on your website as anyone else would. That includes both the main content and any instructions for additional tools on your site such as your navigation, search, or forms.

How to Make Your Websites Understandable

  • Clarify the language of any page in its header HTML tag.
    Avoid overuse of unusual terms such as jargon and idioms, which assistive technology may not be able to identify.
  • Make your content and navigation predictable, keeping it consistent throughout your website.

Use labels, instructions, and error correction tools to help users with disabilities avoid and correct both their own mistakes and website errors.

Robust

Finally, an ADA-compliant website is robust in that it creates the same comprehensive experience for users with disabilities who need assistive technologies as it would for anyone else. In other words, compatibility with any tools a portion of your visitors might use is key to be compliant within this section.

How to Make Your Websites Robust

  • Optimize HTML and any markup languages to create complete tags, avoid duplicates, and keep ID’s unique.
  • Ensure that all UI components have names and roles that can be determined programmatically and directly in the code.
  • Use status messages to provide feedback when users take sufficient action, such as a “success” message when someone fills out a form.

Combine all techniques within the POUR acronym, and you get quite the complex web of needs to be truly WCAG 2.1 and ADA-compliant. The complete guide on the WCAG website provides examples and tips for each of the 50+ individual guidelines within those four overarching categories.

 
Chapter 3

Introducing Our Secret Weapon for ADA Compliance

You might be forgiven for getting just a bit nervous after reading the previous section. After all, one thing is clear: ADA website compliance is not an easy thing to accomplish. Done manually, it can consume your entire web development budget and resources—and even then, you still might miss a few steps and remain in legal jeopardy.

Fortunately, it doesn’t need to be a manual process. Allow us to introduce our secret weapon: AccessiBe, an accessibility tool that can make your website ADA compliant much more dynamically.

Gal Vizel, AccessiBe’s CEO spoke of his company in saying “We know that business owners do not knowingly want to leave their consumers out, not from their shops and not from their websites. AccessiBe makes website accessibility achievable for websites of all sizes so that people with disabilities can have access to a wider range of services, goods, products, and opportunities. We’re bridging the website accessibility gap, getting people with disabilities closer to the reality of an accessible web and to be able to use the web the way it was intended.”

What is AccessiBe?

The tool is simple: one line of JavaScript, added to your website. Once there, your website gains an accessibility interface that users with disabilities can use for features like zooming in, reading the screen, and enabling keyboard-based navigation.

It’s a simple icon that users can click on to expand. Of course, that icon can be customized in both colors and placement to conform to your brand and website layout. From there, the interface helps any users with disabilities more easily navigate and experience your site.

That interface, though, is only the start of a more accessible experience. The rest happens in the background, with an automatic AI-based scan of your website that catches and corrects errors on an ongoing basis. Within 48 hours, your website is accessible and compliant —and it will stay that way as long as the tool is installed in your code.

AccessiBe’s goal is to make the entire internet accessible for users with disabilities by 2025. It’s ambitious, but based on this tool’s capabilities, it doesn’t seem out of the realm of possibility.

Chapter 4

How AccessiBe Can Help Your Website Succeed

Now, here’s how you get things started. AccessiBe can help your website get and stay compliant within the POUR acronym described above.

  • Perceivable: the tool scans your website and adds ALT text to any images missing it. It can also provide captions and, through its integrated screen reader, optimize text to match it.
  • Operable: the tool optimizes and completes coding to allow for alternative inputs, including the correct tagging of links, popups, navigational menus, and more.
  • Understandable: Navigation and labels get fixed up in the code of the site itself, and jargon and technical terms are flagged as needed.
  • Robust: the tool’s contextual machine learning allows for continuous optimization of HTML within the site, including correction of labels of any core UI components.

AccessiBe’s artificial intelligence page further explains the process and various ways it can help you become and remain compliant with all relevant accessibility guidelines. The result is a truly optimized website that ultimately improves your user interface experience, regardless of its needs and challenges.

 
Chapter 5

Next Steps to an ADA-Compliant Website

So much for our secret weapon. But what, exactly, should you do to truly reach ADA site compliance? We suggest a few core steps that can help you get there:

  • Complete a site accessibility audit. That gives you a great idea of where your business stands and where your website needs improvements.
  • Research the Americans with Disabilities Act (ADA) and WCAG trends in your industry. While this guide works great as an introduction, plenty of industry and audience-specific nuances exist. The more familiar you are with them, the better.Talk to your legal team. Whether you have your own legal department or work with an external lawyer, an expert can give you a good perspective on the importance of ADA compliance.
  • Look for a website partner. Especially if going through the process on your own is daunting, finding a partner can go a long way towards calming your worries.
  • Leverage the right tools (Yep, this is where we mention AccessiBe again.) Knowing the tools at your disposal can help you act quickly to make your website accessible.

Ultimately, ADA compliance benefits everyone. It improves your website’s user experience and unlocks a significant part of your target audience. As a result, your potential revenue and profitability rises accordingly. And of course, you ease the worries of company leadership by decreasing legal liabilities, while simultaneously improving your reputation as an accessible, compliant business.
And, once you break it down, it’s not as daunting as it appears at first. At the end of the day, you’ll likely feel similar to countless other businesses addressing this demand. You’ll want to make your website’s ADA-compliance a priority.

Free Demo

Get a free demo to AccessiBe, our preferred ADA compliance tool for websites.

Get Memorable Insights.

Sign up to receive actionable web design advice directly in your inbox monthly.

Get Memorable Insights.

Sign up to receive actionable web design advice directly in your inbox monthly.

Receive emails from Huemor

Huemor-Logo-Black@2x-1-e1674490603267

Jeff Gapinski

President of Huemor

Author

Jeff Gapinski is the President of Huemor where he helps plan the long-term strategic growth of the agency. Jeff is passionate about UI/UX, demand generation, and digital strategy.

What Do You Think?

Have feedback? Maybe some questions? Whatever it is, we'd love to hear from you.

No comments found

Leave a Comment

Your email address will not be published. Required fields are marked *