How to Create an ADA Compliant Website

What is an ADA Compliant Website?

The Americans with Disabilities Act (ADA), which was passed in 1990, requires that businesses make accommodations for people with disabilities.

In the U.S., approximately 20% of the population lives with a disability. Under Title III of the ADA, businesses cannot “discriminate on the basis of disability in places of public accommodation.”

Does the ADA apply to websites?

Based on a series of court decisions, the term “public accommodation” in Title III has been extended to websites as well as physical establishments.

In 2017, the U.S. District Court for the Southern District of Florida ruled in Gil v. Winn Dixie that Winn Dixie’s website was a place of public accommodation. Another impactful court case was Domino's v Robles where the Circuit Court of Appeals in San Francisco ruled that Domino’s app and website should be accessible.

Since these rulings, there has been an onslaught of web accessibility lawsuits at both the state and federal level.

The challenge for businesses is that the ADA currently does not provide guidelines on how to make a site compliant for accessibility. In most court decisions, businesses have been ordered to comply with the WCAG 2.1 AA guidelines.

What is WCAG 2.1?

Established by the W3C, the Web Content Accessibility Guidelines or WCAG has become a global standard for creating an accessible website.

In 2018, the WCAG 2.1 standards were published and the guidelines are broken down into 4 categories:

• Perceivable
• Operable
• Understandable
• Robust

The “perceivable” category means that web visitors can understand what’s on the page. For instance, providing alternative text for images and captions for video or audio content are some of the guidelines in this section, allowing all visitors to understand different types of content.

In the “operable” category, you’ll find standards for keyboard navigation, headings and elements that help a user navigate through your website.

Expanding on the operable category, the “understandable” category offers tips to make sure all visitors can understand how to complete actions on the site. For instance, there are guidelines for error messages on forms, so that visitors understand the required fields and requested information in order to submit a website form.

Lastly, the “robust” category mandates that websites are compatible with “current and future” accessibility tools, such as screen readers and assistive devices.

You can find the full list of WCAG 2.1 standards here. In the full guidelines, you’ll notice steps are labeled as Level A, AA or AAA and it’s typically recommended to follow Level AA for websites. Level AAA is the strictest level of conformance and can be challenging to achieve.

While the WCAG 2.1 is intended for web designers and developers, every website owner should understand these standards because you’ll need to follow the steps when making any content changes on your site.

Designing an ADA Compliant Website

Since there are currently no regulations that define what “ADA compliance” means for websites, the best course of action is to remove accessibility issues on your site.

Keep in mind - web accessibility is not a 1-time project. Similar to SEO and performance, it is an ongoing task.

You’ll need to follow these best practices every time you make changes and add content, and it’s helpful to work with designers & developers who understand these guidelines.

Web Accessibility Best Practices

1. Consistent Navigation

When creating a new website, you’ll typically go through a strategy process to identify an intuitive and comprehensive website navigation.

The navigation menu plays a big role in the overall user experience of your site in general. Visitors utilize the navigation as a road map to find what they are looking for and to accomplish their goal on the site.

For web accessibility, it’s important to show a consistent menu across the entire website. The navigation also helps meet the Multiple Ways requirement under the WCAG requirement. This means that a visitor has multiple paths to get to a website page.

As a user experience (UX) design standard, you’ll often provide links to key pages throughout the home page design. This helps since most visitors will scroll automatically when landing on the page. Providing a clean and intuitive menu navigation will help visitors find the main pages on your site.

You also want to pick a relevant page name for each web page in the navigation, so visitors know what type of content to expect on the page.

2. Alternative Text

Alternative text or alt text is one of the most important elements of web accessibility. Visitors that are using screen readers and assistive devices to view your website rely on alternative text descriptions to understand the imagery on website pages. You’ll often hear the term “alt text” or “alt tags” come up for SEO because search engines also rely on alternative text to understand the purpose of an image.

WCAG provides guidelines on which images should have alternative text added. If an image is more decorative and doesn’t convey any context to the website page, then you don’t need to add an alternative text.

If the image is informative or adds any context to the content, then it’s best to add an alt text that describes the image for those on assistive devices.

You may also have functional images where the image links to a page on your site. For instance, if you have a call to action image within a blog post and clicking on the image takes a visitor to a form or service page then the alt text should explain this functionality. If you skip these elements, then some visitors will not be aware of the images’ dual purpose.

Today, most websites are built on a content management system like WordPress, and it’s very easy to input the alternative text of each image as you add it to the site.

3. Keyboard Navigation

Some visitors may need to navigate the website using their keyboard instead of a mouse. While all sites should be built for keyboard navigation, it’s very common to have some quality control issues and barriers on the site.

Keyboard traps are a common issue where a user moves the keyboard focus to a specific object and isn’t able to navigate away to another element.

When testing keyboard navigation, start by going through your menu and make sure a visitor can navigate all of the elements, drop down menus and buttons in the top navigation.

Your developer or development team should also make sure that there is focus styling. This means when tabbing from element to element, the visitor will see a clearly visible outline, letting them know which element is in focus at the moment.

4. Color Contrast

Understanding and following best practices for color contrast is important for visitors with poor eyesight or even color blindness.

According to the WCAG 2.1, there should be a contrast ratio of at least 4.5:1 between the background color and text color in the website design. For larger text, you can follow a contrast ratio of 3:1.

You can utilize WebAim’s Color Contrast Checker to compare different color combinations on your site. Color contrast is also a best practice for UX design as you want calls to action and key messaging to stand out to all visitors.

A skilled web designer will make sure there is a good contrast between elements and text on the site. But it can be difficult to meet the WCAG ratio levels across the site, especially if your branding colors do not offer contrasting hues. In this situation, you can consider adding a visual toolbar on the site for users to utilize and adjust the contrast manually. For WordPress websites, the free One Click Accessibility plugin offers a simple widget with these tools.

Why Focus on Web Accessibility?

The ADA and WCAG 2.1 are all related to the legal aspects of accessibility, but making your site accessible to visitors is important for numerous reasons.

Today, websites play a critical role in all aspects of a business from marketing and sales to recruitment and thought leadership. When designing and developing a website, the ultimate goal is to engage visitors and guide them to a specific step. That final goal may vary depending on whether it’s a lead generation, e-commerce or due diligence site.

If you aren’t considering web accessibility, then you could be unknowingly creating barriers to your website for a significant portion of visitors.

Having issues with the usability of a site is a common reason that visitors will abandon a website. Visitors who experience any accessibility issues on the site will most likely leave the site immediately.

How do I know if my website is ADA compliant?

Remember that there currently aren’t regulations on ADA compliance for websites and it’s best to focus on WCAG 2.1 standards for your website.

Start by utilizing some of these free scanning tools that can guide you on accessibility errors.

1. WAVE by Web Aim

WAVE by Web Aim is a reputable accessibility scanning tool and you can utilize the online tool or the Chrome/Firefox extension to scan a website URL. The evaluation tool identifies common errors related to WCAG.

Keep in mind that the tools is scanning only the URL that you enter during a test. Start with your home page and most visited website pages during your testing process.

2. Google Chrome Lighthouse

Lighthouse is a free tool offered in Google Chrome developer resources, and you can run an audit within the browser. It’s helpful to run a Lighthouse audit in an Incognito browser because this avoids conflicts with Chrome extensions. When running the audit of a web page, make sure to check off Accessibility in the category list. You can also utilize Lighthouse for performance testing.

After running different tests, it’s best to consult with a knowledgeable web agency on fixing any major issues. These scans are also evaluating the current state of your website and you’ll need to do regular evaluations every few months to catch any new errors or issues.

If you are facing a lawsuit or legal order regarding web accessibility, make sure to consult with an attorney first. Be careful signing up for a manual accessibility audit, as these can be extremely costly and may not include any fixes.