R

RatedWithAI

Blog

Scan your site

Technical Guide

WCAG 2.2 vs 2.1: What Changed and Why It Matters

A complete technical breakdown of the 9 new success criteria in WCAG 2.2, the one criterion that was removed, and exactly what you need to change to stay compliant.

·10 min read

TL;DR: Quick Summary

WCAG 2.2 was published as a W3C Recommendation on October 5, 2023. Here's what changed:

+9

New Success Criteria

-1

Removed Criterion

6

AA Level Criteria

The biggest changes focus on cognitive accessibility, mobile usability, and authentication flows—areas that WCAG 2.1 didn't address thoroughly.

Why WCAG 2.2 Matters

If your organization currently targets WCAG 2.1 AA compliance, you're likely wondering: Do we need to update?

The short answer: Yes, eventually. Here's why:

  • Legal landscape is shifting: The DOJ and courts are increasingly referencing the latest WCAG version. The EU's EN 301 549 standard has already incorporated WCAG 2.2.
  • Government deadlines: Section 508 refresh is expected to require WCAG 2.2 compliance for federal agencies.
  • Competitive advantage: Better accessibility means better UX for everyone, including your non-disabled users.

The 9 New Success Criteria in WCAG 2.2

Here's a complete breakdown of each new criterion, what it means, and how to implement it.

AA

2.4.11 Focus Not Obscured (Minimum)

When a user interface component receives keyboard focus, the component must not be entirely hidden due to author-created content.

Why it matters:

Sticky headers, cookie banners, and chat widgets often cover the focused element, leaving keyboard users unable to see where they are on the page.

How to fix:

  • • Ensure sticky elements don't cover interactive content
  • • Use scroll-padding-top to offset for fixed headers
  • • Close modals/popups when focus moves elsewhere
AAA

2.4.12 Focus Not Obscured (Enhanced)

No part of the focus indicator can be hidden by author-created content—stricter than the AA version.

Implementation:

Requires the entire focused element (including its outline) to be fully visible at all times. Consider this for premium accessibility targets.

AAA

2.4.13 Focus Appearance

Focus indicators must meet specific size and contrast requirements: at least a 2px solid outline or equivalent area, with 3:1 contrast against adjacent colors.

Quick implementation:

:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
AA

2.5.7 Dragging Movements

Any functionality that uses dragging can be achieved by a single pointer without dragging, unless dragging is essential.

Common violations:

  • • Drag-to-reorder lists with no alternative
  • • Slider controls without +/- buttons or input fields
  • • Map pan/zoom with only drag interaction

How to fix:

Add up/down buttons for reordering, provide a text input for sliders, or allow click-to-select-then-click-to-place for drag interactions.

AA

2.5.8 Target Size (Minimum)

The target for pointer inputs must be at least 24×24 CSS pixels, with exceptions for inline links, user-resizable targets, and legally required sizes.

Key point:

This is smaller than the 44×44px AAA requirement but larger than many current implementations. Particularly important for mobile touch targets.

CSS example:

.button { min-width: 24px; min-height: 24px; }
A

3.2.6 Consistent Help

If a web page contains help mechanisms (contact info, chatbot, FAQ link), they must appear in the same relative order across pages.

Why it matters:

Users with cognitive disabilities rely on consistent layouts. If your help chat is in the bottom-right on some pages and top-left on others, it creates confusion.

A

3.3.7 Redundant Entry

Information previously entered or provided by the user should be auto-populated or available for selection, unless re-entering is essential for security.

Common violations:

  • • Checkout forms requiring shipping address re-entry for billing
  • • Multi-step wizards that don't remember previous answers
  • • Support forms that don't pre-fill known user info

How to fix:

Add "Same as shipping" checkboxes, persist form data across steps, and pre-fill known information from user profiles.

AA

3.3.8 Accessible Authentication (Minimum)

Cognitive function tests (like remembering passwords or solving puzzles) must not be required for authentication—unless an alternative or assistance is provided.

This means:

  • • Allow password managers (no paste blocking!)
  • • Support passkeys and biometric authentication
  • • Provide alternative methods for CAPTCHAs
  • • Don't require users to remember arbitrary strings
AAA

3.3.9 Accessible Authentication (Enhanced)

Stricter version that removes the exception for "object recognition" CAPTCHAs (like "click all the traffic lights").

For AAA compliance:

Consider invisible reCAPTCHA, hCaptcha accessibility mode, or eliminate CAPTCHAs entirely in favor of rate limiting and other bot detection.

The Criterion That Was Removed

4.1.1 Parsing has been removed from WCAG 2.2. This criterion required HTML to be properly structured with unique IDs and correct nesting.

Why removed? Modern browsers and assistive technologies are incredibly resilient to HTML parsing errors. The W3C determined that parsing issues caught by this criterion are now better handled by other success criteria or are no longer accessibility barriers.

What this means for you: You still need valid, well-structured HTML for other compliance reasons—but you won't fail WCAG 2.2 specifically because of parsing errors.

Quick Reference: What Level Is Each Criterion?

CriterionLevelFocus Area
2.4.11 Focus Not Obscured (Min)AAKeyboard navigation
2.4.12 Focus Not Obscured (Enhanced)AAAKeyboard navigation
2.4.13 Focus AppearanceAAAVisual design
2.5.7 Dragging MovementsAAMotor accessibility
2.5.8 Target Size (Minimum)AAMotor accessibility
3.2.6 Consistent HelpACognitive accessibility
3.3.7 Redundant EntryACognitive accessibility
3.3.8 Accessible Auth (Min)AAAuthentication
3.3.9 Accessible Auth (Enhanced)AAAAuthentication

How to Update from WCAG 2.1 to 2.2

If you're already WCAG 2.1 AA compliant, here's your upgrade checklist:

  1. 1
    Audit your focus indicators

    Ensure focused elements aren't hidden by sticky headers, modals, or chat widgets.

  2. 2
    Review drag interactions

    Add button-based alternatives for any drag-to-reorder, slider, or map pan functionality.

  3. 3
    Check touch target sizes

    Ensure clickable elements are at least 24×24 pixels (44×44 recommended).

  4. 4
    Standardize help placement

    Put chat buttons, contact links, and FAQs in the same location on every page.

  5. 5
    Reduce form re-entry

    Auto-fill previously entered data and provide "same as shipping" type checkboxes.

  6. 6
    Fix authentication barriers

    Allow paste in password fields, support password managers, and provide CAPTCHA alternatives.

Check Your WCAG 2.2 Compliance

See How Your Site Scores Against the Latest Standards

Our AI-powered scanner tests for both WCAG 2.1 and 2.2 criteria, giving you a clear roadmap to full compliance.

Scan Your Site Free

Related Resources