WCAG 2.2 Checklist: 16 Success Criteria Explained

2–5 min read

WCAG 2.2 Checklist: 16 Success Criteria Explained

Making your website accessible isn’t just good practice—it’s a legal and ethical imperative. The Web Content Accessibility Guidelines (WCAG) 2.2 introduce nine brand‑new success criteria (SC) designed to address emerging user needs, especially around mobile and low‑vision accessibility. In this post, we’ll walk through a 16‑point WCAG 2.2 checklist: the nine new SC plus seven foundational criteria you should always test.


What Is WCAG 2.2?

WCAG 2.2 is the latest update to the internationally recognized guidelines for making web content more accessible. Building on 2.0 and 2.1, it:

  • Adds nine new success criteria focused on low‑vision, cognitive, and mobile interactions.
  • Retains all existing Level A and AA requirements from prior versions.
  • Previews future work toward WCAG 3.0 (the “Silver” project) with a stronger emphasis on user needs.

Achieving WCAG 2.2 compliance means your site will be easier to navigate, understand, and interact with for people with disabilities—plus it helps you rank better in search engines by demonstrating high‑quality, user‑focused content.


Your 16‑Point WCAG 2.2 Checklist

Below is your step‑by‑step checklist. We break it into:

  1. Nine new WCAG 2.2 Success Criteria
  2. Seven Core Success Criteria that remain vital from earlier versions


Nine New WCAG 2.2 Success Criteria

  1. 1.3.7 Identify Purpose (Level A)
    Ensure the purpose of interface components (buttons, links, icons) can be programmatically determined. For example, use ARIA roles (e.g., role="button") or proper HTML elements so assistive technologies announce their function.

  2. 1.4.11 Non‑Text Contrast (Level AA)
    All non‑text content necessary for understanding or interacting (icons, graphical objects, focus indicators) must have a contrast ratio of at least 3:1 against adjacent colors.

  3. 1.4.12 Text Spacing (Level AA)
    Users must be able to override text letter‑spacing, word‑spacing, line‑height, and paragraph‑spacing up to specified limits (e.g., 0.12 em letter‑spacing) without breaking content or functionality.

  4. 1.4.13 Content on Hover or Focus (Level AA)
    When additional content appears on hover or focus (tooltips, dropdowns), it must remain visible until the user dismisses it or moves focus elsewhere. This helps keyboard and touch‑only users.

  5. 2.2.4 Character Key Shortcuts (Level A)
    If your page uses single‑character keyboard shortcuts, provide a way to turn them off or remap them, to avoid conflicts with assistive technology or user expectations.

  6. 2.2.5 Target Size (Minimum) (Level AA)
    Interactive targets (buttons, links) must be at least 24×24 CSS pixels—or provide an equivalent accessible mechanism—so users with mobility impairments can activate them easily.

  7. 2.4.11 Focus Appearance (Minimum) (Level AA)
    Focus indicators must be at least 1.5 times thicker than before (e.g., 2px border or outline) and remain visible against adjacent colors, ensuring keyboard users always know where they are.

  8. 2.5.7 Dragging Movements (Level AA)
    Any functionality that requires dragging (e.g., sliders, drag‑and‑drop) must offer an alternative method (such as arrow keys) so users who can’t drag with pointer devices can still interact.

  9. 3.2.6 Status Messages (Level AA)
    Changes in page status (e.g., “message sent,” “item deleted”) must be programmatically determinable without receiving focus, for screen reader users to get timely feedback.


Seven Core WCAG Criteria to Always Test

Even before WCAG 2.2, these seven foundational success criteria underpinned accessible design. Make them part of every audit:

  1. 1.4.3 Contrast (Minimum) (Level AA)
    Body text and images of text must have at least a 4.5:1 contrast ratio against the background. Larger text (≥18pt) requires 3:1.

  2. 1.4.4 Resize Text (Level AA)
    Users must be able to resize text up to 200% without assistive technology and without horizontal scrolling.

  3. 1.4.10 Reflow (Level AA)
    Content must reflow up to 400% zoom without loss of information or functionality. This supports users who magnify content.

  4. 2.1.1 Keyboard (Level A)
    All functionality must be operable via keyboard alone (e.g., Tab, Enter, arrow keys).

  5. 2.2.1 Timing Adjustable (Level A)
    Provide options to extend time limits or pause moving content if it’s time‑based, so users with cognitive or motor challenges aren’t rushed.

  6. 2.2.2 Pause, Stop, Hide (Level A)
    For moving, blinking or scrolling content, offer a mechanism to pause or hide it or control its speed.

  7. 2.4.7 Focus Visible (Level AA)
    The keyboard focus indicator (outline or highlight) must be clearly visible at all times, with sufficient contrast and thickness.


How to Use This Checklist

  1. Audit your codebase with automated tools (e.g., Axe, Lighthouse) to catch low‑contrast or missing focus styles.
  2. Manual testing: Navigate your site with just the keyboard or a screen reader to verify Character Key Shortcuts, Content on Hover, and Status Messages.
  3. CSS adjustments: Replace inline !important spacing rules with user‑adjustable CSS variables to satisfy Text Spacing.
  4. Design updates: Ensure your clickable targets are large enough (Target Size) and that all icons have accessible labels (Identify Purpose).
  5. Retest periodically—especially after design overhauls or new features.


Conclusion

WCAG 2.2 raises the bar for truly inclusive experiences, with nine new success criteria that tackle real‑world mobile, cognitive, and low‑vision challenges. By combining these with the seven perennial WCAG checks above, you’ll cover the 16 most critical success criteria for a bullet‑proof accessibility audit.

 Next Steps: