The 5 Requirements for ADA Website Compliance (WCAG 2.1 AA)

The Blog

The 5 Requirements for ADA Website Compliance (WCAG 2.1 AA)

So, your business’s website needs to be brought up to ADA accessibility standards, and you have a rough idea of what that means, but what do you do next?

The ADA has set forth a Title II Checklist for website accessibility. This is designed for use in conducting a preliminary assessment of the accessibility of your website. There are five major requirements which your website must meet in order to adhere to ADA compatibility standards. WCAG 2.1 AA (Web Content Accessibility Guidelines) are frequently referenced by courts in ADA violation lawsuits.

The WCAG 2.0 AA success criteria are comprised of 38 requirements, individually referred to as success criterion. If your website meets all 38 of these, you’re in great shape! But even if it doesn’t, your website can still be accessible. Start with the major concerns first, then work your way into the details.

What’s legally required to meet WCAG 2.1 AA standards?

WCAG button on keyboardStrictly speaking, nothing concrete is legally required. WCAG is not the law, it’s a list of best practices for accessibility standards for all users. The ADA, on the other hand, is the law, as are several other state statutes which can apply to website accessibility and discrimination. This is why it’s best to meet as many of the WCAG success criteria as you can.

WCAG is the most widely adopted and comprehensive international technical standard for web content accessibility. Although it is not backed by law, it has been referenced by laws in 21 countries and in the EU. It’s backed by the W3C (World Wide Web Consortium), which is regarded as the world’s highest authority in web accessibility goals and universal design.

Here’s an easy place to start with the 5 major areas you’ll need to address. This is in no way a comprehensive checklist, but will serve as a good base.

  1. Does your website offer alternative ways to access your content? This can mean offering alt text (all images and non-text content need alternative text descriptions which can be picked up by screen readers and other assistive technologies), transcripts (all video and audio-only content has a text transcript, which is clearly labeled and linked below the media), closed captioning (all video with sound contains accurate closed captioning), audio descriptions, live captioning, and more.
  2. Visual presentation and structure. Is your website structured properly such that it is easily navigable by common assistive equipment? Adjusting your structure for this can mean using proper HTML markup techniques, use of color contrast, adjustable UIs (User Interface) – for example – is your text resizable to up to 200% without negatively affecting the presentation of your website? This also includes not using images to present text, proper controls for video and audio players (must be able to stop, pause, and mute), presenting your content in a meaningful order and sequence, and not relying on a single sensory experience to convey information.
  3. User interface. Your UI needs to be fully accessible by keyboard only (some users are unable to operate a mouse), and your navigation needs to be organized logically and clearly. To accommodate for users with seizure disorders, any flashing or blinking content must be able to be paused, stopped, or hidden. Use of a “skip to content” or “skip navigation” link at the top of each page should be utilized, such that users with screen readers don’t have to sit through all of the menu options every time they turn the page.
  4. This means that each page or article on your website needs to have a unique and descriptive page title. Your site must be navigable in a logical, meaningful, and sequential fashion. Each link needs meaningful anchor text (not just a “click here!”) This can also mean use of “focus indicators”, such as putting a colorful border around an element when the user has selected it (like highlighting a link or outlining a text box.) You’ll need to set the language for your website programmatically and indicate any internal language changes. Are there multiple ways to get around your website? For example, do you offer not just a menu, but a sitemap, search bar, breadcrumbs, or helpful links within or after the content?
  5. This means that your site is reliably navigable, and that users must interact with focused elements in order to cause change (such as hitting enter or submit on a form, rather than the form auto-submitting when complete.) The layout should be consistent throughout the site. Error notifications in forms should be easy to see and correct. HTML markup needs to be clean and error-free, and all elements properly nested. Think “name, role, value.” For every element of your website, these considerations should all be able to be programmatically determined, and compatible with assistive technology. This includes properly labeling form fields, using alternative text for elements, using descriptive anchor text for links, and more.

Designing your website or auditing your existing one with an eye toward these five areas will ensure that you have a good base with regard to bringing your website up to the ADA’s legal standards for accessibility.

What are the four principles of WCAG compliance?

Braille keyboardThe four principles of WCAG compliance can be best remembered by the acronym “POUR.” This means that your web content is perceivableusers must be able to perceive the information being presented whether through sight, hearing, or touch; operational – do all of the navigable components of your website work? Are there any elements which require interaction that all users cannot perform?; understandable – the information presented and the method of operating your website must be easily understood; and robust – the content must be able to be reliably interpreted and used by most common assistive technologies, and offered via multiple avenues. Ironically, the best website is a “POUR” one!

What’s the difference between the three levels of WCAG compliance?

In short, each successive level is progressively harder to meet, and each level of conformance indicates inclusion of the levels before it. There are 25 criteria which you must meet to reach level A. For level AA, you must reach 13 additional requirements. Level AAA is the highest level, with 23 more criteria on top of level AA.

Let’s look at one of the success criteria for accessible navigation, for example. An “A” rating means that web pages have descriptive titles which describe the topic or purpose effectively. An “AA” rating means that multiple avenues for navigation have been provided, in addition to the “A” criteria. An “AAA” rating might include section headings to effectively organize content, and additional niceties. WCAG 2.0 AA is considered a “happy medium” of acceptable compliance standards.

If your website meets level A, the majority of users will be able to use your website. Each additional level and criterion met makes your site accessible to more and more people. The level you should aim for is AA, which is the level that’s legally required for certain sites, and the one that is typically referred to when you’re tasked with “making a website accessible/ADA compliant.”

How do I test for WCAG compliance?

Designers working on accessibility designOnce you’ve made strides towards bringing your website up to compliance, how do you test for it? It’s useful to have a WCAG checklist on hand when you’re working through the guidelines. Wuhcag provides a number of comprehensive free checklists to get you started.

For each WCAG guideline, there are testable success criteria, which are at three levels described above. The success criteria are organized according to the POUR principles.

There are even some automated testing services which provide instant results. One example of this is ACE. Simply enter your website’s URL, and a preliminary scan will reveal your immediate shortcomings and provide a good place for you to start. Some examples of what these tests can reveal is a review of your clickables (links and buttons), your navigation, your orientation, your popups, hidden links which allow skipping to content, a review of your menus and navigation structure for assistive technology compatibility, a review of your images, graphics, forms, elements, visual contrast, and other considerations.

There are many of these such tools, and using several will give you a comprehensive baseline for your website’s improvement checklist. After improvements are made, you can re-employ these tools to see where you’re still lacking and track improvements.


Top Things to Consider for Your Website Redesign in 2024

Read More Here

The Importance of Offering Texting For Customers

Read More Here

Best WordPress Review Plugins to Display Customer Reviews

Read More Here

The Importance Of Contact Forms On Landing Pages

Read More Here