The ultimate WCAG 2.1 and 2.2 Level AA checklist

The information presented within this guide is aimed at website owners seeking to learn the ropes of web accessibility. Technical elements are described in layman’s terms, and, as a rule, all topics pertaining to the legalities of web accessibility are presented in as simplified a manner as possible. This guide has no legal bearing, and cannot be relied on in the case of litigation.

The Web Content Accessibility Guidelines, known commonly as WCAG, are the golden standard for web accessibility. 

Throughout the years, there have been a number of WCAG versions - WCAG 2.0, 2.1, and 2.2, with each consisting of three levels of conformance:

1. Level A - the most minimal level of conformance 
2. Level AA - the optimal level of conformance, referenced by most accessibility laws
3. Level AAA - the highest level of accessibility and hardest to achieve 

To be considered accessible, your website should conform to WCAG 2.1 or WCAG 2.2 at Level AA.

It is worth noting that under the Americans with Disabilities Act (ADA), reaching this level of conformance will highly mitigate your risk of legal action. 

To help guide you through the process of achieving WCAG 2.1 or 2.2 Level AA conformance, we’ve compiled a list of action items you will need to cover.

For your convenience, we’ve created a PDF version of this checklist, which you can download by pressing here. 

Important note: While this checklist is a useful resource, it is only a quick summary of the necessary requirements to achieve WCAG conformance and not a complete list.

WCAG 2.1 Level AA checklist

To conform with WCAG 2.1 Level, you will need to address the following action items:

Ensure all website functionality is operable via keyboard

Your website needs to be fully operable via keyboard to allow people with disabilities who don’t use a mouse to navigate it.

Use clear headings and labels 

Clear headings and labels help all website visitors, specifically those using a screen reader, quickly understand the information contained on a web page, it’s structure and flow, and how best to navigate it. Headings should be short and clear, and all elements such as navigation bars, forms, and search boxes should be clearly labeled. Clear headings also have significant SEO benefits.

Create clear and helpful web page titles

Clear and descriptive titles for each web page help readers navigate your site more easily and recognize bookmarked pages. This is particularly critical for those using assistive technology like screen readers.

Assign the correct language to web pages

You can determine whether this is the case by reviewing the lang attribute on the HTML element.

Make sure when a language on a web page changes, it is indicated in the code 

If a section of a web page incorporates a language that is different from the one that is already declared, it will need to be indicated on a code level. For this, you can use a separate lang attribute for the relevant section.

Provide alt text to meaningful images

Meaningful images, defined as those that convey critical, important information, need to feature alternative text so that they can be understood by users of assistive technologies. Alt text should not be added to decorative images. To read more about alt text best practices, press here.

Ensure a high contrast between text sections and their backgrounds

Ensure sufficient contrast between text (or images of text) and its background, with a contrast ratio of at least 4.5:1. When using bold or large text (18pt or larger), you can strike a 3:1 ratio. Contrast restrictions do not apply to logos and brand names.

Ensure that information conveyed by color is also visually evident without color

Ensure that information conveyed through color is also visually distinguishable without it. You can achieve this by incorporating patterns, graphics, or text.

Provide captions for videos with audio

Meaningful video content with audio should have accurate captions that are synchronized and clearly identify speakers. Captions do not need to be added to decorative video content. 

Provide captions for live videos

Captions should be added to live videos, such as webinars or streaming events, as well. This can be achieved by using real-time captioning service. Important note: Live captions must indicate who is speaking at any given moment, and explain other important non-speech sounds.

Provide website visitors with audio descriptions for video content

Audio descriptions are critical for people with certain vision impairments, as they convey the meaning of static or moving images within a video.  

Provide transcripts for audio and video content

Transcripts offer a text-based alternative to audio and video content, enabling individuals with hearing impairments to access the spoken information.

Ensure that text can be resized to 200% without loss of content or function

When website visitors resize text up to 200%, content needs to remain fully visible without overlapping, being cut off, or disappearing.

Ensure that there’s no loss in functionality when website visitors adjust text spacing

When website visitors modify spacing for easier content consumption, ensure that no content or functionality is lost.

Ensure that website visitors can use either screen orientation

Website visitors should be able to view and operate content in their preferred orientation, whether portrait or landscape.

Ensure your website is responsive

Responsive design ensures that content adapts seamlessly to smaller screens, providing an optimal browsing experience for mobile and tablet users.

Make all website functions accessible for visitors with limited mobility

Not all visitors can perform gestures that require multiple points of contact or complex movements, such as pinch-to-zoom, two-finger tapping, or drawing shapes. It is best to avoid designing functionality that relies on these actions. If such gestures are necessary, offer alternative methods for performing the same tasks, providing keyboard shortcuts, simple button clicks, or voice commands.

Add a “Skip to Content" link for easy navigation to the main content

Website visitors who depend on keyboards or screen readers may need to go through a long list of links and elements in the header before reaching the main content. By providing a "Skip to Content" link, you allow them to bypass these elements and go directly to the core content.

Ensure errors are clearly identified and described in text

Coloring a field in red alone does not effectively communicate an error to a user. Instead, provide a clear text description that explains what went wrong and how to correct it. Additionally, proper focus management and the use of ARIA attributes are essential to ensure screen readers announce the error to users.

Ensure web elements remain stable when receiving input

Form fields, radio buttons, and checkboxes should not trigger unexpected changes, like a shift in focus or unexpected data submission. Controls should function predictably, and website visitors should be informed of any actions before they occur.

Ensure buttons, icons, and menus appear consistently

When components, including navigation elements, appear multiple times throughout the website, it's crucial to maintain uniformity in their labels, design, and functionality to ensure a predictable experience.

Ensure your website is devoid of content that can trigger seizures

Content like rapidly flashing lights can trigger seizures. It is not enough to warn website visitors of them, as these measures are often missed. Per WCAG, web pages should not include anything that flashes more than three times per second.

Allow website visitors to control auto-playing content

Website visitors should have the ability to pause, stop, or control the volume of auto-playing audio. Auto-playing content can interfere with screen reader technology and, if possible, it is best to disable it completely.

Allow website visitors to control time limits when engaging with interactive elements

Some website visitors may need extra time to complete tasks. Ensure that your website does not time out without user consent. Additionally, ensure visitors are able to request more time without losing session data.

Make sure single-key shortcuts can be turned off or changed

Single-key shortcuts can be challenging for some website visitors, as they may be triggered accidentally through speech input or by hitting keys unintentionally. If your website includes these shortcuts, offer an option to disable or modify them.

What other checklist items do you need to address to conform to WCAG 2.2 Level AA? 

Ensure authentication methods are accessible

Provide users with authentication options that don’t rely solely on memory. Include features like copy-pasting credentials, password managers, or one-time codes. Avoid requiring users to solve cognitive tasks like CAPTCHA without providing accessible alternatives.

Make focus indicators visible and distinguishable

Ensure the focus indicator for interactive elements (like buttons or links) is clearly visible. It must have a contrast ratio of at least 3:1 and cover at least 2px of thickness or a sufficiently large focus area.

Provide alternatives to drag-and-drop functionality

Offer options like click-to-select and click-to-place for drag-and-drop actions to support users who rely on keyboards or alternative input devices.

Ensure interactive elements have a large target size

Make sure links, buttons, and other interactive elements have a target size of at least 24 by 24 CSS pixels to accommodate people with motor impairments.

Ensure help mechanisms are consistently available

Provide consistent and easily identifiable access to help features, such as tooltips or contact options, throughout your website.

Avoid requiring redundant user input

Allow users to bypass re-entering the same information by offering features like autocomplete or saving their preferences for future sessions.

Testing a website for WCAG Level AA conformance

There are two main approaches to test a website for WCAG conformance: 

• Manual testing: This method involves a detailed review of your website, usually carried out by web accessibility specialists, such as accessServices. Expert service providers assess different aspects of your site, including keyboard accessibility, alternative text for images, heading structure, and more, to pinpoint accessibility barriers
  
• Automated testing tools: Tools like accessScan leverage AI to run a quick audit of your web page, and identify accessibility issues. You will be presented with a score (accessible, semi-compliant, and non-compliant), and a detailed accessibility report

A combination of both manual testing and automated tools is typically the most effective strategy for ensuring complete web accessibility. 

While manual testing offers an in-depth analysis, automated tools help quickly detect standard issues.

It's also valuable to have individuals with disabilities test your website and report any accessibility challenges they face. 

Some expert service providers, such as accessServices, include this user feedback as part of their manual testing process, which can provide crucial insights.

Online document accessibility under WCAG

WCAG applies not only to websites, but also to online documents like PDFs and Microsoft Office files (e.g., Word documents). If you feature any of these on your website, you need to ensure they conform to WCAG.

To achieve conformance, tools like Adobe Acrobat and Microsoft Office apps can help create accessible documents. Existing documents may require updates or remediation to align with WCAG standards.

While remediation can be handled manually, partnering with experts like accessServices ensures a more efficient and comprehensive approach, particularly for large and complex document remediation projects.

For more insights, explore our guide on creating accessible PDFs and our article on top PDF accessibility testers.

WCAG’s role in achieving ADA compliance

The Americans with Disabilities Act (ADA) exists to protect the rights of people with disabilities within various aspects of daily life. Title III of the ADA, specifically, applies to the way businesses need to adjust themselves so that they are accommodating to people with disabilities.

Relevant to organizations considered “public accommodations” - a category that most public-facing businesses fall into, ADA Title III is now widely applied to the online domain, as well as to physical environments.

While nothing yet has been codified into law, when U.S. courts rule in cases involving web accessibility under the ADA, they routinely reference WCAG as the standard websites should conform to under the law.

This is consistent with the stance of the Department of Justice (DOJ), which has been repeatedly publicized during the last few years. 

It is generally accepted that if you conform to WCAG 2.1 Level AA, you are unlikely to meet legal action (like demand letters or lawsuits) under the ADA.

WCAG’s role in other web accessibility legislation 

There are a number of other prominent web accessibility laws that apply to businesses and organizations in North America. These include:

• Section 508 of the Rehabilitation Act: This law applies to government agencies, federally funded organizations, and service providers to such bodies
  
• The Accessibility for Ontarians with Disabilities Act (AODA): This law applies to most businesses registered in Ontario, Canada 

Unlike the ADA, these laws specify WCAG as the standard for compliance. 

If these laws apply to you and your business, you will need to ensure your website (and, in the case of Section 508, other digital assets) conforms to an earlier version of WCAG, WCAG 2.0, at Level AA.

You can rely on these checklists in that regard:

• Section 508 compliance: The complete checklist
• The ultimate AODA website compliance checklist

Learn more about WCAG

WCAG is a long, complex document that’s ultimately based on four guiding principles:

1. Perceivable: Information and user interface elements must be presented in a way that users can easily perceive.
2. Operable: User interface components and navigation should be operable using a keyboard and other accessible methods.
3. Understandable: Information and the functioning of the user interface must be clear and easy to understand.
   
4. Robust: Content must be robust enough to work with current and future technologies
   

These principles are extrapolated into guidelines and criteria, which you can learn about in the following guides:

1. What is WCAG?
2. The ultimate guide to WCAG: The web Content Accessibility Guidelines 
3. WCAG 2.2: What you need to know in 2024

Use an accessibility solution to help you conform to WCAG

As stated at the top of this guide, fully conforming to WCAG requires that you address numerous guidelines, including those that do not appear on this checklist. This can prove challenging, especially if you lack technical expertise and would like to reach high levels of accessibility fairly quickly.

Many businesses rely on web accessibility solutions and services, like those offered by accesiBe, to help them make major strides on their road to WCAG conformance. 

An AI-powered tool like accessWidget scans your website for WCAG violations, and then automatically remediates issues. To complement these automated efforts, companies also turn to accessServices, to more thoroughly analyze their website for accessibility issues, and to remediate digital assets such as PDFs and videos. 

To speak to one of our accessibility experts and learn more about how accessiBe can help you conform with WCAG, press here.