WCAG 2.2 vs WCAG 2.1 — Complete Guide to 9 New Success Criteria (2026)

The Web Content Accessibility Guidelines (WCAG) 2.2 was published as a W3C Recommendation on October 5, 2023. It adds 9 new success criteria to WCAG 2.1 (and removes one obsolete criterion). For businesses, developers, and compliance professionals, understanding these changes is essential for future-proofing your accessibility program.

In this comprehensive guide, we'll break down every new WCAG 2.2 success criterion, provide code examples, explain which criteria are required at AA level, and help you decide if and when to upgrade from WCAG 2.1.

WCAG Version Comparison — At a Glance

The 9 New WCAG 2.2 Success Criteria (Complete Breakdown)

WCAG 2.2 adds 9 new success criteria across all three levels (A, AA, AAA). Here's every criterion, explained with code examples:

1. 2.4.11 Focus Not Obscured (Minimum) — Level AA

What it requires: When a keyboard-focusable component receives focus, the component must not be entirely hidden by sticky headers, popups, or other overlapping content. At minimum, some part of the focused element must remain visible.

Why it matters: Sticky headers are common in modern web design. Without this criterion, keyboard-only users might tab to an element that's hidden behind a fixed header, leaving them confused about where focus is.

<style>
/* ❌ Bad — focus indicator hidden behind sticky header */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ✅ Good — ensure focus indicator is visible */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

*:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    position: relative;
    z-index: 20;
}
</style>

2. 2.4.12 Focus Not Obscured (Enhanced) — Level AAA

What it requires: The stricter version of 2.4.11 — no part of the focused component may be hidden by any overlapping content. The entire focus indicator must be fully visible.

3. 2.4.13 Focus Appearance — Level AAA

What it requires: The focus indicator must meet specific size and contrast requirements. It must be at least as large as the area of a 2px thick border around the element, and must have at least 3:1 contrast against adjacent colors.

<style>
/* WCAG 2.2 AAA compliant focus indicator */
*:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}
</style>

4. 2.5.7 Dragging Movements — Level AA

What it requires: Any functionality that uses a drag-and-drop gesture must also have a single-pointer alternative (click, tap, or keyboard). Users should not be required to perform complex motor gestures.

Example: A kanban board that allows dragging cards must also provide buttons to move cards left/right.

<!-- ❌ Bad — drag only -->
<div draggable="true">Task card</div>

<!-- ✅ Good — drag + button alternative -->
<div>
    <div draggable="true">Task card</div>
    <button>Move Left</button>
    <button>Move Right</button>
</div>

5. 2.5.8 Target Size Minimum — Level AA

What it requires: Interactive targets (buttons, links, form fields) must be at least 24×24 CSS pixels, or have adequate spacing between them. This is a stricter version of the previous recommendation (44×44 for mobile).

Exception: Inline links, sentences, and targets in a block of text can be smaller.

<style>
/* ✅ Good — minimum target size */
.button {
    min-width: 24px;
    min-height: 24px;
    padding: 8px 12px;
}

/* ❌ Bad — too small */
.tiny-button {
    width: 16px;
    height: 16px;
}
</style>

6. 3.2.6 Consistent Help — Level A

What it requires: If help mechanisms (contact information, chat support, FAQ links, help desk) appear on multiple pages, they must appear in the same relative order and location on each page.

Why it matters: Users with cognitive disabilities or low vision rely on consistent placement to find help when they need it.

<!-- ✅ Good — help link always in footer, same position -->
<footer>
    <nav>
        <a href="/contact">Contact Us</a>
        <a href="/faq">FAQ</a>
        <a href="/support">Support</a>
    </nav>
</footer>

7. 3.3.7 Redundant Entry — Level A

What it requires: Information that a user has already entered in the same process (e.g., a multi-step checkout) should not be re-requested unless it's essential or the user needs to confirm it.

Example: If a user enters their shipping address in step 1, don't ask for it again in step 3 unless they're confirming it.

<!-- ✅ Good — auto-fill previously entered info -->
<input type="text" name="shipping_address" 
       value="<?php echo $_SESSION['shipping_address']; ?>">

8. 3.3.8 Accessible Authentication (Minimum) — Level AA

What it requires: CAPTCHAs and cognitive function tests (e.g., "identify all images with traffic lights") cannot be the only authentication method. An alternative method must exist, such as email magic link, WebAuthn (biometric/passkey), or password manager support.

Why it matters: Cognitive function tests exclude users with learning disabilities, memory impairments, and many older adults.

<!-- ❌ Bad — CAPTCHA only -->
<div class="captcha">Select all images with buses</div>

<!-- ✅ Good — CAPTCHA + alternative -->
<div class="captcha">Select all images with buses</div>
<a href="/auth/magic-link">Sign in with email magic link</a>
<button id="passkey-login">Sign in with passkey (Face ID/Touch ID)</button>

9. 3.3.9 Accessible Authentication (Enhanced) — Level AAA

What it requires: No cognitive function test at all in any authentication step. Only non-cognitive methods are allowed: password entry (memory is OK), WebAuthn (biometric/passkey), or email magic link.

What Was Removed from WCAG 2.2?

4.1.1 Parsing — REMOVED

This criterion tested for valid HTML parsing (unique IDs, properly nested elements, no duplicate attributes). It was removed because modern browsers automatically correct most parsing errors, and automated testing tools are now very good at detecting these issues through other means.

WCAG 2.2 vs WCAG 2.1 — Comparison Table

Criterion	Level	WCAG 2.1?	WCAG 2.2?	Difficulty
2.4.11 Focus Not Obscured	AA	❌	✅	Medium
2.4.12 Focus Not Obscured (Enhanced)	AAA	❌	✅	Medium
2.4.13 Focus Appearance	AAA	❌	✅	Easy
2.5.7 Dragging Movements	AA	❌	✅	Medium
2.5.8 Target Size Minimum	AA	❌	✅	Easy
3.2.6 Consistent Help	A	❌	✅	Easy
3.3.7 Redundant Entry	A	❌	✅	Easy
3.3.8 Accessible Authentication	AA	❌	✅	Medium
3.3.9 Accessible Authentication (Enhanced)	AAA	❌	✅	Hard

Do You Need to Upgrade to WCAG 2.2?

The short answer: WCAG 2.1 remains the legal standard for ADA, EAA, and Section 508. However, there are compelling reasons to adopt WCAG 2.2 now:

Reasons to Upgrade Now:

• UK already mandates WCAG 2.2 — The UK Public Sector Bodies Accessibility Regulations reference WCAG 2.2 AA
• Future-proofing — The next DOJ/HHS rule update will likely reference WCAG 2.2
• Improved user experience — Focus visibility, touch targets, and accessible authentication benefit all users
• Competitive advantage — Being ahead of compliance standards differentiates your brand

Reasons to Stay with WCAG 2.1 (For Now):

• Legal standard unchanged — ADA, EAA, Section 508 all still reference WCAG 2.1 AA
• Compliance burden — Adding 9 new criteria requires development time
• WCAG 2.2 is backwards compatible — All 2.1 conformant content automatically meets 2.2; you can upgrade incrementally

How to Test Your Site for WCAG 2.2 Compliance

AccessiTool's suite of tools now includes WCAG 2.2 checks. Use these tools to test your site:

• ADA Compliance Checker — Full WCAG 2.1 + 2.2 scan
• Keyboard Navigation Checker — Tests focus visibility (2.4.11)
• Mobile Scanner — Tests touch target size (2.5.8)

Frequently Asked Questions — WCAG 2.2

Q1: Is WCAG 2.2 legally required under ADA?

Not yet. The ADA currently references WCAG 2.1 Level AA. However, the DOJ's next rulemaking (expected 2027-2028) will likely adopt WCAG 2.2 or even WCAG 3.0.

Q2: Does the EAA require WCAG 2.2?

The EAA references EN 301 549, which currently references WCAG 2.1 AA. However, member states are moving toward WCAG 2.2 as best practice.

Q3: What is the easiest WCAG 2.2 criterion to implement?

2.5.8 Target Size Minimum is the easiest — add min-width:24px; min-height:24px to your buttons and links.

Q4: What is the hardest WCAG 2.2 criterion to implement?

3.3.9 Accessible Authentication (AAA) is the hardest — completely removing cognitive function tests from authentication may require re-architecting your login system.

Q5: Is WCAG 2.2 backwards compatible with WCAG 2.1?

Yes. Any content that conforms to WCAG 2.1 automatically conforms to WCAG 2.2. No criteria have been made stricter; only new criteria added.

Q6: Will WCAG 2.2 affect my existing accessibility score?

If your site is WCAG 2.1 AA conformant, your score will remain the same. The new criteria are additive, not retroactive. You'll simply have new opportunities to improve your score.

Ready to Test Your WCAG 2.2 Compliance?

AccessiTool helps you test your website against both WCAG 2.1 and WCAG 2.2 standards — completely free, no signup required.