Discover everything we launched at Webflow Conf 2024
Read post
Blog
ADA testing 101: How to create an accessible website

ADA testing 101: How to create an accessible website

ADA compliance ensures more people in your audience can use your site. Try these ADA testing techniques to ensure your site meets critical guidelines.

ADA testing 101: How to create an accessible website

ADA compliance ensures more people in your audience can use your site. Try these ADA testing techniques to ensure your site meets critical guidelines.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Get started for free
Written by
Webflow Team
Webflow Team
Webflow Team
Webflow Team

Incorporating Americans with Disabilities Act (ADA) accommodations into your website design system means more people can access and enjoy your content.

Optimizing your site for web accessibility involves ensuring people with disabilities can use your site, and ADA testing is a core practice that helps achieve this.

Many ADA testing tools exist on the market, but there are also ways to test your site’s accessibility without them. Whichever method you use, your primary goal remains the same — landing on a web design that more people can access and enjoy.

We’ve gathered some helpful information about how ADA compliance website testing works, who needs it, and its requirements. We’ve also detailed four techniques that work wonders for discovering issues and finding solutions.

ADA compliance testing

The Americans with Disabilities Act (passed in 1990) established standards for how every industry should maintain accessibility for disabled people. In 2010, the U.S. Department of Justice officially amended the law to apply to websites. Since then, companies large and small have worked toward updating site designs to follow ADA standards, and many testing tools have been developed to help them, like the WebAIM contrast checker and the U.S. Social Security Administration’s ANDI tool.

Testing for ADA compliance lets you find issues and adjust your design to make your site accessible for as many people as possible. And an ADA-compliant website brings in more visitors, improves your search engine optimization (SEO), and generally looks cleaner.

Do you need ADA compliance testing?

Most businesses are legally required to maintain accessibility standards in their physical and digital locations. Specifically, ADA impacts businesses in the following categories:

  • All private companies that employ 15 or more employees
  • All state and local government agencies
  • All businesses that offer a public service

If your company meets any of these criteria but fails to maintain ADA compliance, you’re risking lawsuits and hefty fines. Even if your organization doesn’t fit these descriptions, it’s better to follow ADA standards so you don’t need to worry about it when your business scales up.

WCAG requirements for ADA website compliance

The Web Content Accessibility Guidelines (WCAG) describe all the digital requirements websites must maintain to comply with the ADA. It’s currently in version 2.2. In 2023, the World Wide Web Consortium (W3C), the consortium that oversees the WCAG, released a working draft for the 3.0 version, but the finalized version is still a few years out.

For now, WCAG 2.2 establishes standards for the following categories:

  • Perceivable
  • Operable
  • Understandable
  • Robust

Perceivable

The perceivable category relates to how users with disabilities view, read, and interpret your content. Meeting the criteria in this category means your content is readable for people with impaired vision and color blindness and accessible for people who are deaf or hard of hearing. As an added benefit, following these visual design accessibility guidelines typically results in more pleasing color palettes and font choices that everyone can enjoy.

Here are the standards that fall into this category:

  • Text alternatives. Nontext elements must have a text description readable by screen readers.
  • Time-based media. Prerecorded audio and video files must offer captions or alternatives with the same information.
  • Adaptability. Content must follow a coherent structure that accessibility programs can use to determine the proper sequence, relationships, and presentation needed to portray the material.
  • Distinguishability. Text must remain distinguishable from the background, with a color contrast ratio of 4.5:1 for normal text or 3:1 for large text. Audio must also have controls that enable users to disable it, and background audio must remain at least 20 decibels lower than speech.

Operable

The operable category establishes standards that ensure users with disabilities can easily navigate and interface with your content. That means prioritizing an accessible design with adaptive peripherals. Meeting this category’s criteria makes your site accessible to users with mobility and dexterity disabilities.

Here are the standards that fall into this category:

  • Keyboard accessibility. All functionality must be keyboard-compatible.
  • Enough time. Wherever content involves timing, you must offer alternatives or allow users to disable or adjust the time limit.
  • Resistance to seizures and physical reactions. Animations must not flash more than three times in any one-second period.
  • Navigability. Page titles, link text, and headings should provide useful information that helps users navigate content.
  • Input modalities. Interactions must not require path-based gestures, and all gestures must be possible with a single pointer.

Understandable

The understandable category establishes standards so all users can easily read and comprehend your content. They’re centered around making content inclusive and readable, which writers and designers should always have in mind. These standards aim to make websites accessible for users with learning and comprehension disabilities.

Here are the standards that fall into this category:

  • Readability. Language must be recognizable, and content must require no more than a lower secondary education level to understand. When the text requires a higher reading level, supplemental content or a separate version must be available.
  • Predictability. When user interface (UI) components receive focus, they must not change the content’s context. Also, navigation, help options, and identification must remain consistent.
  • Input assistance. Instructions and labels must clearly mark where your content requires input, and errors must come with clear correction instructions.

Robust

The robust criteria establish standards that ensure assistive technologies can interpret content correctly. The only standard in this category — compatibility — refers to keeping the names, roles, and values of UI components (like form elements) easy to navigate to and set programmatically. This helps screen readers and adaptive input devices navigate through the content naturally.

Accessibility at Webflow

Learn about our commitment to web accessibility and how you can build more accessible online experiences.

Learn more
Accessibility at Webflow

Learn about our commitment to web accessibility and how you can build more accessible online experiences.

Learn more
Learn more

4 ADA testing techniques

There are many ADA compliance criteria to meet, and they’re relatively easy individually — but the challenge comes from taking them on as a whole. Thankfully, the following four ADA compliance testing techniques can help.

1. Automated testing

Quite a few tools exist today that can help test your site automatically. Some are free, and others offer additional services for a subscription. Here are a few options:

  • ANDI: A free government tool that the U.S. Social Security Administration created that you can run from your bookmarks
  • ARC Monitoring: A paid enterprise-level tool that offers dashboards and actionable insights
  • SortSite: A paid tool for businesses that creates a comprehensive report of accessibility issues

2. Manual testing

Automated tools are convenient, but manual testing is free and a valuable process for every design team. Carefully combing through content helps your team learn the accessibility guidelines more comprehensively.

To perform a manual test, you can use our accessibility checklist to check through every page on your website. If possible, ensure two people cross-check each page so neither misses anything. As you audit the site, create a list of common issues. Then, when the audit is complete, design website updates that fix the problems sitewide.

3. Assistive technology testing

Accessibility tools let you assess your site yourself. For example, you can use screen readers like NVDA and JAWS to learn how disabled users experience your site and optimize their interactions. Plus, these tools are both free to download.

4. User testing

Some tools, like Userlytics, offer comprehensive accessibility testing performed by users with disabilities. This process extracts honest feedback from your audience that can direct your accessibility initiatives.

Build more inclusive sites with Webflow

Inclusivity ensures that as many people as possible can access your content, and it’s every design team’s responsibility to make it happen. Webflow offers many features that make updating your site easier than ever, like reusable componentsand responsive designs. Our visual web development platform helps you accomplish this without relying on developers.

Webflow also provides professional tools that help create accessible, inclusive experiences for your customers. Get started with Webflow Enterprise today to transform how your team builds.

Build with Webflow

Webflow Enterprise gives your teams the power to build, ship, and manage sites collaboratively at scale.

Contact sales
Build with Webflow

Webflow Enterprise gives your teams the power to build, ship, and manage sites collaboratively at scale.

Contact sales
Contact sales
Last Updated
May 31, 2024
Build with Webflow

Webflow Enterprise gives your teams the power to build, ship, and manage sites collaboratively at scale.

Contact sales
Contact sales