The Ultimate WCAG 2.1 & 2.2 Level AA Checklist

The Ultimate WCAG 2.1 & 2.2 Level AA Checklist

What Is WCAG? Your Guide to a More Accessible Web

The Web Content Accessibility Guidelines (WCAG) are international standards developed by the W3C’s Web Accessibility Initiative (WAI). These guidelines describe how to make websites, applications, and digital documents accessible for people with disabilities. This idea is founded on the principle that the internet should work for everyone, regardless of their ability.

Now, the most commonly used versions are WCAG 2.1 and WCAG 2.2, which was recently published. Both versions of WCAG are backward-compatible. This means that new updates will not invalidate past success criteria for WCAG.

The WCAG is structured around four basic principles:

  • Perceivable: Information must be presented in such a way that a user knows that the information is being presented. This applies to users of any assistive technology.
  • Operable: All user interface components must be operable by keyboard and all non-mouse interface technologies.
  • Understandable: Content must be presented in a way that is understandable and predictable so as to avoid confusion and mistakes.
  • Robust: Content must be compatible with current technologies and be available and usable with future technologies.

For many, digital accessibility cannot be an option but rather a condition of having equal access to the world.

Moreover, it can stop people from the ability to take part in the digital activities of every day live, such as shopping, banking, work, and accessing government services.

WCAG 2.2 vs WCAG 2.1: What’s New and What Stays the Same

WCAG 2.2, published in October 2023, expands on WCAG 2.1 without removing or modifying existing success criteria. Instead, it introduces nine new requirements, with a focus on improving the web experience for people with cognitive disabilities, low vision, and motor impairments [W3C, WCAG 2.2 Overview].

One of the biggest benefits of WCAG 2.2 is that it addresses real-life usability issues. For example:

  • Focus Not Obscured (Minimum and Enhanced): Ensures keyboard users can always see the currently focused element, such as buttons or links, even when page elements like sticky headers are present.
  • Dragging Movements: Requires that users can complete tasks without needing to drag elements, helping those with motor impairments.
  • Target Size (Minimum): Prevents small buttons or links from being hard to tap, especially on mobile devices.
  • Accessible Authentication (Minimum and Enhanced): Stops the use of memory-based or logic tests (like identifying images of cars) as the only method of login.

These updates reinforce mobile accessibility and minimize friction in everyday interactions, particularly for individuals who may experience challenges with fine motor skills or short-term memory.

Check out our WCAG Accessibility Guide for better understanding the conformance levels.

Why Following WCAG 2.2 Is Good for Business and Users

Adopting WCAG 2.2 Level AA is not just about meeting legal obligations. It creates real business value while improving the user experience for millions of people.

Broader Audience Reach

Globally, over 1 billion people live with some form of disability, according to the World Health Organization (WHO). Many rely on screen readers, keyboard navigation, screen magnifiers, or speech recognition to access the web.

By following WCAG 2.2, your digital content becomes accessible to a much wider audience, including aging users and those with temporary impairments like a broken arm or eye strain.

Inclusive design benefits everyone, not just people with permanent disabilities.

Legal Risk Reduction

WCAG is referenced in many digital accessibility laws around the world. For example:

  • In the U.S., the Americans with Disabilities Act (ADA) has been used to file thousands of lawsuits against inaccessible websites. While the ADA does not name WCAG explicitly, most rulings use WCAG 2.1 Level AA or WCAG 2.2 as the benchmark.
  • In the European Union, the upcoming European Accessibility Act (EAA) mandates conformance with WCAG for many digital services by June 2025.

Non-compliance can lead to financial penalties, reputational damage, or lost business due to inaccessible online services.

Improved SEO and Mobile UX

Accessibility improvements often go hand in hand with better search engine optimization (SEO). Features like:

  • Descriptive alt text
  • Semantic HTML
  • Clear page headings
  • Mobile-friendly navigation
  • Faster loading times, 

help your website rank higher and perform better for all users.

Google recommends accessibility best practices because they improve the overall usability and quality of a site.

Brand Trust and Social Responsibility

Committing to WCAG 2.2 shows customers, clients, and partners that your organization values inclusion and equity.

Accessible websites are easier to use, more trustworthy, and more likely to generate positive brand perception. This can translate into stronger customer loyalty, especially among Gen Z and Millennial audiences who value ethical and inclusive brands.

Read how accessible design can boost trust in our post on How to Design for Blind and Low Vision Users.

Absolutely. Here's the in-depth version of "Understanding WCAG Levels: A, AA, and AAA Compared", with practical examples, official sources, and an internal link suggestion.

Understanding WCAG Levels: A, AA, and AAA Compared

The Web Content Accessibility Guidelines (WCAG) provide three levels of conformance: Level ALevel AA, and Level AAA. Each level represents a step forward in accessibility, building on the last to improve usability for people with a range of disabilities, including visual, auditory, motor, and cognitive impairments.

This tiered system helps developers and business owners prioritize their accessibility efforts depending on legal obligations, user needs, and available resources.

Source: W3C – WCAG Conformance Requirements

Level A – The Bare Minimum

Level A sets the absolute foundation. It includes success criteria that must be met so that users with significant disabilities can access essential content.

Examples of Level A requirements:

  • Non-text content must have a text alternative (SC 1.1.1)
    Example: An image of a shopping cart icon should have alt="View cart".
  • Keyboard accessibility (SC 2.1.1)
    Users must be able to navigate menus, buttons, and forms without using a mouse.
  • No content that flashes more than three times per second (SC 2.3.1)
    This protects users prone to seizures or photosensitive disorders.

Learn more about the Best Accessible Website Checklist for an overview.

Level AA – The Legal & Usability Standard

Level AA includes all of Level A and introduces more refined requirements that greatly improve the user experience for a broader audience.

This level is recommended by most accessibility laws, such as:

  • The ADA in the U.S.
  • The European Accessibility Act
  • Section 508 for U.S. federal websites
  • EN 301 549, the EU accessibility standard

Examples of Level AA requirements:

Requirement

WCAG SC

Description

Example

Contrast Ratio (Normal Text)

1.4.3

Text must have a contrast ratio of at least 4.5:1 against its background to ensure readability for users with low vision.

Light gray on white = fails

Use darker text for better visibility

Meaningful Headings & Labels

2.4.6

Pages must include clear, descriptive headings and labels that help users understand and navigate content.

Use logical heading structure (<h1> to <h6>) that reflects the content hierarchy

Visible Focus Indicators

2.4.7

When users navigate via keyboard, all interactive elements must have a visible focus indicator (outline, border, color change, etc.).

Tabbing highlights links or buttons with an outline or style change

Consistent Navigation

3.2.3

Repeated navigation components (like menus or headers) must remain in the same location across all pages.

Main nav stays at the top across every page, reducing cognitive load

Accessible Authentication

WCAG 2.2

Login or verification must not rely solely on memory, puzzles, or visuals. Offer simple alternatives for people with cognitive or motor issues.

Allow login via email link or one-time code instead of complex password or CAPTCHA

 

Source: W3C – What’s New in WCAG 2.2

For a full breakdown of these success criteria, read our WCAG 2.2 Compliance Guide

Level AAA – Ideal But Not Always Practical

Level AAA is the most comprehensive. It adds criteria designed to maximize accessibility for people with the most significant or multiple disabilities.

However, WCAG itself acknowledges that full AAA compliance is not always realistic for all types of content.

Examples of Level AAA requirements:

  • Sign language interpretation for all prerecorded videos (SC 1.2.6)
     Example: A company promotional video must include a signer in-frame.
  • A reading level that does not exceed lower secondary education (SC 3.1.5)
     This can be difficult for legal or technical documents.
  • Live audio content must have a real-time transcript (SC 1.2.9)
     Example: A live podcast must have a captioner transcribing in real time.

While AAA is admirable, AA is the most common goal and the benchmark for legal protection and inclusive design.

Source: W3C – WCAG Levels Overview

WCAG 2.1 & 2.2 AA Checklist: What You Need to Pass

While WCAG 2.1 introduced improvements for mobile users and people with cognitive or low vision disabilities, WCAG 2.2 added 9 new criteria to improve usability for people with motor impairments and cognitive challenges.

Here’s a practical checklist of key success criteria every WCAG 2.1 & 2.2 AA-compliant site should implement:

Accessibility Feature

Requirement

Examples

Alt Text for Images

All meaningful images must include descriptive alt text. Decorative images should use alt="".

- alt="Black leather backpack with front zipper pocket"

- alt="" for decorative borders or background graphics

Keyboard Accessibility

All features must be fully operable with a keyboard alone.

- Open dropdowns with Enter; navigate with Tab/Arrow keys

- Dismiss modals with Esc

- Tab through sliders and form fields

Contrast Ratio

Text must meet minimum contrast:

- Normal text: 4.5:1

- Large text: 3:1

- Light gray on white = fails

- Black text on pastel yellow = passes

Clear Headings & Landmarks

Use semantic HTML (<h1>–<h6>, <nav>, <main>, <section>) to structure content logically.

- Blog uses <main> for body, <aside> for related posts

- Section headings use <h2>

Visible Focus

Ensure clear visual focus indicators for all interactive elements.

- Links show an outline or underline when focused

- Buttons change color or add a border on focus

No Keyboard Traps

Users must be able to navigate into and out of interactive components using keyboard alone.

- Modal allows exiting with Esc or Tab

- Carousel doesn’t trap user or loop endlessly

Resizable Text

Page content must remain usable when zoomed up to 200% without breaking layout.

- Zoomed text doesn’t overlap or cut off

- Sidebars collapse properly on small screens

Error Suggestions

Clearly identify input errors and how to fix them.

- Show: “Email address is missing an @ symbol”

- Highlight error field with message and icon

Accessible Authentication (2.2)

Avoid requiring memory, puzzles, or image-based captchas as the only login method.

- Avoid “select all objects with a car” captchas

- Offer password managers, OTPs, or social logins

Target Size (2.2)

Clickable elements must be at least 24×24 CSS pixels, with enough spacing.

- Close (“X”) icon on modal has extra padding

- Buttons are large enough on mobile and not too close together

Dragging Movements (2.2)

All interactions must be possible without drag-and-drop.

- File upload offers “Click to upload”

- Sortable lists provide up/down buttons as alternatives

 

To see how we apply these standards at Accesstive, explore our own Access Services, which is built to conform with WCAG 2.2 AA.

How to Test Your Website for WCAG AA Compliance

Testing your site against WCAG Level AA is essential, not just for accessibility but also for legal risk reduction. The best practice is to combine automated testing tools with manual audits and real user testing.

Automated Testing Tools

You can start with tools like:

  • WAVE: Browser-based testing to identify contrast issues, missing labels, etc.
  • axe DevTools: Chrome/Firefox extension that scans pages for accessibility errors using Deque’s rules engine.
  • Lighthouse: A free Google Chrome tool that includes an accessibility audit score based on WCAG.
  • Access AI Audit: An AI-powered audit tool that tests your site for WCAG 2.1 & 2.2 Level AA issues, including contrast, alt text, focus states, and more, all directly in your browser.
  • Access Monitor: This platform scans and tracks accessibility issues over time, offering detailed reports aligned with WCAG compliance goals.

However, no tool can catch 100% of issues. For instance, automated tests can't judge whether alt text is meaningful or whether a form error message makes sense.

Manual Testing Techniques

  • Keyboard Testing: Navigate your site using only the keyboard (Tab, Shift+Tab, Enter, Esc). Can you access all links and buttons? Is focus visible?
  • Screen Reader Testing: Try your site with NVDA (Windows) or VoiceOver (Mac). Do headings, buttons, and forms make sense when read aloud?
  • Zoom and Contrast Testing: Zoom your page to 200% and enable high contrast mode. Check for layout breakage or hidden content.

We also recommend following the testing workflow outlined by the W3C Accessibility Evaluation Resources (W3C resource).

Not sure where to begin? Start with a Free Accessibility Audit now to get an overview of the errors.

Accessibility Is Ongoing: Why WCAG 2.2 Matters Now More Than Ever

Accessibility is not a project, it is a continuous effort to build barrier-free digital environments. If technology keeps evolving, then our standards are going to have to evolve as well. WCAG 2.2 is a result of the most recent knowledge of users' needs, particularly for individuals with cognitive and motor impairments.

Whether you are a developer, marketer, product owner, founder, or somewhere in between, if you make accessibility a part of your workflow, you will encourage improved user experiences, improved SEO, and enhance the inclusivity of your brand.

Accessibility is not simply compliance. It is digital respect.

Jonas Mayer
Outreach Expert

Jonas is passionate about creating a more accessible and user-friendly web. His blog posts focus on clear design, helpful tools, and simple ways to improve accessibility for all kinds of users. He enjoys breaking down complex ideas so anyone can...

Get a Free 
AI Accessibility 
Audit in Seconds!

Relevant Posts