R

RatedWithAI

Blog

Scan your site

WCAG Standards

WCAG 2.1 vs 2.2: What Changed and What It Means for Your Website

The Web Content Accessibility Guidelines just got an important update. Here's what's new in WCAG 2.2 and how it affects your compliance strategy.

·7 min read

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility. Published by the World Wide Web Consortium (W3C), WCAG provides technical criteria for making web content accessible to people with disabilities.

WCAG is organized into three conformance levels:

Level A

Minimum accessibility. If you don't meet these, some users will be completely unable to access content.

Level AA

Industry standard. Most laws and policies reference Level AA compliance.

Level AAA

Enhanced accessibility. Difficult to achieve for all content, but excellent to strive for.

Why this matters: When courts reference "ADA compliance" for websites, they almost always mean WCAG 2.1 Level AA as the benchmark. With the release of WCAG 2.2, the question becomes: should you upgrade?

WCAG Version Timeline

2008

WCAG 2.0 Released

The foundational version. Introduced the four principles: Perceivable, Operable, Understandable, Robust (POUR).

2018

WCAG 2.1 Released

Added 17 new success criteria focused on mobile accessibility, low vision, and cognitive disabilities.

2023

WCAG 2.2 Released

Added 9 new success criteria (and removed 1 from 2.1). Stronger focus on mobile usability and cognitive accessibility.

Important: WCAG 2.2 is backward-compatible. Everything that conforms to WCAG 2.1 Level AA also conforms to WCAG 2.2 Level A and Level AA—you just need to address the new criteria.

What's New in WCAG 2.2

WCAG 2.2 introduces 9 new success criteria and removes 1 criterion from WCAG 2.1 (4.1.1 Parsing, which became obsolete with modern HTML5 standards).

Here's a breakdown of the new requirements:

Level AA

2.4.11 Focus Not Obscured (Minimum)

NEW

When a component receives keyboard focus, it must not be completely hidden by other content (like sticky headers, cookie banners, or chat widgets).

Why it matters: Keyboard users need to see where focus is. If your sticky header covers the focused element, users can't tell what they're interacting with.

How to fix: Ensure focused elements aren't obscured, or implement focus scrolling that accounts for fixed headers.

Level AAA

2.4.12 Focus Not Obscured (Enhanced)

NEW

The stricter version: focused items must not be obscured at all by author-created content.

Level AAA

2.4.13 Focus Appearance

NEW

Focus indicators must meet minimum size and contrast requirements (at least 2 CSS pixels thick with 3:1 contrast).

How to fix: Use a visible outline or border on focus states. The default browser outline usually meets this, but custom focus styles should be tested.

Level AA

2.5.7 Dragging Movements

NEW

Any functionality that uses dragging (drag-and-drop, sliders, sortable lists) must have a simple pointer alternative (like click/tap actions or buttons).

Why it matters: Dragging is difficult for users with motor impairments, tremors, or those using assistive technologies.

How to fix: Provide alternative controls. For sliders, add increment/decrement buttons. For drag-and-drop lists, add move up/down buttons.

Level AA

2.5.8 Target Size (Minimum)

NEW

Interactive targets (buttons, links, form controls) must be at least 24×24 CSS pixels, with some exceptions for inline links and essential UI.

Why it matters: Small touch targets are hard to tap accurately, especially for users with motor impairments or on mobile devices.

How to fix: Increase button and link padding. For icon-only buttons, ensure the clickable area is large enough even if the icon is small.

Level A

3.2.6 Consistent Help

NEW

If help mechanisms (contact info, chatbots, self-service options) appear on multiple pages, they must be in the same relative order.

Why it matters: Users with cognitive disabilities rely on consistent patterns to find help when they need it.

How to fix: If your footer has "Contact Us," "Help Center," and "Live Chat" links, keep them in the same order across all pages.

Level A

3.3.7 Redundant Entry

NEW

Information previously entered by the user must be auto-populated or available to select, unless re-entering is essential for security.

Why it matters: Re-entering the same information (like shipping address on a checkout flow) is frustrating and error-prone, especially for users with cognitive or motor impairments.

How to fix: Use autocomplete attributes, remember user data between steps, or offer "same as billing address" checkboxes.

Level AA

3.3.8 Accessible Authentication (Minimum)

NEW

Authentication steps must not require cognitive function tests (like remembering passwords or solving puzzles) unless alternatives exist (like password managers, biometrics, or copy/paste).

Why it matters: CAPTCHAs, complex password rules, and puzzle-based authentication exclude users with cognitive disabilities.

How to fix: Allow password managers. Offer email magic links or SMS codes. Use accessible CAPTCHAs (like Google's reCAPTCHA v3).

Level AAA

3.3.9 Accessible Authentication (Enhanced)

NEW

The stricter version: no cognitive function tests at all, except for object recognition (like selecting images with cars).

Key Changes Explained Simply

If you're already WCAG 2.1 Level AA compliant, here's what you need to focus on for WCAG 2.2:

1

Mobile-first thinking

Larger touch targets (24×24px minimum) and better alternatives to drag-and-drop.

2

Cognitive accessibility

Consistent help placement, no redundant data entry, accessible authentication.

3

Better keyboard support

Focus indicators can't be hidden by sticky headers or overlays.

Most sites will need to update button sizes, improve form flows, and audit sticky elements that might obscure focus.

Who's Affected by WCAG 2.2?

As of 2026, WCAG 2.2 is becoming the new standard, but adoption is gradual:

Government & Public Sector

The European Union's European Accessibility Act (EAA) requires WCAG 2.1 Level AA compliance by June 2025, with WCAG 2.2 expected to become the reference soon after. US federal sites under Section 508 are also shifting to WCAG 2.2.

Private Companies

US courts still primarily reference WCAG 2.1 Level AA in ADA lawsuits, but forward-thinking companies are proactively adopting WCAG 2.2 to future-proof compliance.

E-commerce & SaaS

High-traffic sites and platforms serving international markets should adopt WCAG 2.2 now to stay ahead of regulatory changes and reduce legal risk.

Small Businesses

If you're already WCAG 2.1 compliant, you're in good shape. Upgrading to 2.2 is a smart move but not yet legally mandated in most jurisdictions.

Bottom line: WCAG 2.1 Level AA is still the legal standard in most places, but WCAG 2.2 is the direction everything is moving. Plan to upgrade within the next 12-24 months.

Action Items: Upgrading to WCAG 2.2

Here's your step-by-step plan to upgrade from WCAG 2.1 to WCAG 2.2:

Step 1: Audit Your Current State

Run an accessibility scan to see where you stand. Tools like RatedWithAI can identify WCAG 2.2 violations and prioritize fixes.

Step 2: Fix Touch Target Sizes

Review all interactive elements—buttons, links, form controls. Ensure they're at least 24×24 CSS pixels.

/* Good: Adequate padding */
button {
  padding: 12px 24px; /* Creates >24px touch target */
  min-width: 44px;
  min-height: 44px;
}

Step 3: Provide Alternatives to Dragging

For every drag-and-drop interface, add button-based alternatives. Sliders should have +/− buttons. Sortable lists should have "Move up" / "Move down" options.

Step 4: Check Focus Visibility

Navigate your site with the keyboard (Tab key). Make sure:

  • Focused elements aren't covered by sticky headers or cookie banners
  • Focus indicators are clearly visible (use outline or custom styles with good contrast)

Step 5: Simplify Authentication

Review login and signup flows:

  • Allow password managers (don't block autofill)
  • Use accessible CAPTCHAs (invisible reCAPTCHA or alternative methods)
  • Offer email magic links or biometric login as alternatives to passwords

Step 6: Eliminate Redundant Entry

In multi-step forms (checkout, onboarding), auto-fill data the user already provided. Use autocomplete attributes and offer "same as above" checkboxes.

Step 7: Standardize Help Placement

If you have contact links, chatbots, or help documentation, keep them in the same location across pages. Users rely on consistent patterns.

Tools to Test WCAG 2.2 Compliance

Most automated accessibility scanners now include WCAG 2.2 checks. Here's how to test:

  • Automated scanning — Use RatedWithAI to scan your site against WCAG 2.2 Level AA criteria
  • Browser DevTools — Chrome and Edge have built-in accessibility audits in their DevTools (Lighthouse)
  • Manual keyboard testing — Unplug your mouse and navigate your site. Check if focus is always visible.
  • Mobile testing — Test on a real phone. Are buttons easy to tap? Can you zoom to 200%?

Should You Upgrade to WCAG 2.2 Now?

Short answer: Yes, if you can.

WCAG 2.2 is backward-compatible with 2.1, so upgrading doesn't break your existing compliance—it just adds new requirements. If you're already doing accessibility work, the incremental effort to meet WCAG 2.2 Level AA is manageable.

Here's when to prioritize the upgrade:

  • You're launching a new site or redesign — build WCAG 2.2 compliance from the start
  • You serve international markets — especially the EU, where regulations are tightening
  • You're in a high-risk industry — e-commerce, finance, healthcare, education
  • You want to future-proof — courts and regulations will eventually catch up to WCAG 2.2

If you're a small business still working on WCAG 2.1 compliance, finish that first. But once you're there, WCAG 2.2 is the next logical step—and it's easier than you think.

WCAG 2.2 Compliance Check

See How Your Site Measures Up

Get a detailed accessibility report with WCAG 2.2 criteria—free, no signup required.

Scan Your Site Free

Related Resources