Back to Knowledge Base
WCAG Guidelines

Introduction to WCAG 2.2

18 min read

Understanding WCAG 2.2: The Complete Guide

The Web Content Accessibility Guidelines (WCAG) 2.1 are the internationally recognized standard for web accessibility. Published by the World Wide Web Consortium (W3C), these guidelines provide a framework for making web content more accessible to people with disabilities.

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines. These are technical standards that explain how to make web content accessible to people with:

  • Visual impairments (blindness, low vision, color blindness)
  • Hearing impairments (deafness, hard of hearing)
  • Motor impairments (limited fine motor control, paralysis)
  • Cognitive impairments (learning disabilities, attention disorders)

WCAG Version History

  • WCAG 1.0 (1999): First version, now obsolete
  • WCAG 2.0 (2008): Major revision, still widely referenced
  • WCAG 2.2 (2018): Added mobile, cognitive, and low vision criteria
  • WCAG 2.2 (2023): Latest version with additional criteria
  • WCAG 3.0 (In development): Future major revision with new structure

Most legal requirements currently reference WCAG 2.2 Level AA.

The Four Principles (POUR)

WCAG is organized around four core principles. All content must be:

1. Perceivable

Users must be able to perceive the information being presented. Content cannot be invisible to all of their senses.

Key Guidelines:

  • Provide text alternatives for non-text content (1.1)
  • Provide captions and alternatives for multimedia (1.2)
  • Create content that can be presented in different ways (1.3)
  • Make it easier to see and hear content (1.4)

Example Requirement:

html
<!-- All images need alt text -->
<img src="chart.png" alt="Bar chart showing 40% increase in sales Q3 vs Q2">

<!-- Videos need captions -->
<video>
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo-captions.vtt" srclang="en">
</video>

2. Operable

Users must be able to operate the interface. The interface cannot require interaction that a user cannot perform.

Key Guidelines:

  • Make all functionality available from a keyboard (2.1)
  • Give users enough time to read and use content (2.2)
  • Don't design content that causes seizures (2.3)
  • Help users navigate and find content (2.4)
  • Make it easier to use inputs other than keyboard (2.5)

Example Requirement:

html
<!-- All interactive elements must be keyboard accessible -->
<button onclick="submitForm()">Submit</button>

<!-- Skip links help keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>

3. Understandable

Users must be able to understand the information and the operation of the user interface. Content or operation cannot be beyond their understanding.

Key Guidelines:

  • Make text readable and understandable (3.1)
  • Make web pages appear and operate in predictable ways (3.2)
  • Help users avoid and correct mistakes (3.3)

Example Requirement:

html
<!-- Specify page language -->
<html lang="en">

<!-- Provide clear error messages -->
<label for="email">Email Address</label>
<input type="email" id="email" aria-describedby="email-error">
<span id="email-error" class="error">
  Please enter a valid email address (e.g., [email protected])
</span>

4. Robust

Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

Key Guidelines:

  • Maximize compatibility with current and future tools (4.1)

Example Requirement:

html
<!-- Use valid, semantic HTML -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Proper ARIA usage -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>

Conformance Levels

WCAG has three conformance levels:

Level A (Minimum)

The most basic accessibility features. Without these, some users will find it impossible to use the content.

Must satisfy 30 success criteria including:

  • 1.1.1 Non-text Content
  • 1.3.1 Info and Relationships
  • 2.1.1 Keyboard
  • 4.1.1 Parsing
  • 4.1.2 Name, Role, Value

Level AA (Recommended)

Addresses the most common and impactful accessibility barriers. This is the level required by most laws and regulations.

Must satisfy all Level A plus 20 additional criteria including:

  • 1.4.3 Contrast (Minimum) - 4.5:1 ratio
  • 1.4.4 Resize Text - up to 200%
  • 2.4.6 Headings and Labels
  • 2.4.7 Focus Visible

Level AAA (Enhanced)

The highest level of accessibility. Not required by most laws, and not achievable for all content types.

Must satisfy all Level A, AA, plus 28 additional criteria including:

  • 1.4.6 Contrast (Enhanced) - 7:1 ratio
  • 2.1.3 Keyboard (No Exception)
  • 2.4.9 Link Purpose (Link Only)
  • 3.1.5 Reading Level

New in WCAG 2.2

WCAG 2.2 added 17 new success criteria, primarily addressing:

Mobile Accessibility

  • 1.3.4 Orientation
  • 2.5.1 Pointer Gestures
  • 2.5.2 Pointer Cancellation
  • 2.5.4 Motion Actuation

Cognitive Accessibility

  • 1.3.5 Identify Input Purpose
  • 1.3.6 Identify Purpose
  • 1.4.13 Content on Hover or Focus

Low Vision

  • 1.4.10 Reflow
  • 1.4.11 Non-text Contrast
  • 1.4.12 Text Spacing

Legal Context

WCAG is referenced by accessibility laws worldwide:

  • EU: European Accessibility Act (EAA) requires WCAG 2.2 AA by 2030
  • USA: ADA lawsuits typically reference WCAG 2.2 AA
  • UK: Public Sector Bodies Regulations require WCAG 2.2 AA
  • Canada: Accessibility for Ontarians with Disabilities Act (AODA)
  • Australia: Disability Discrimination Act references WCAG

Implementing WCAG

Achieving conformance requires:

  1. Understanding the Guidelines: Read and comprehend each success criterion
  2. Testing: Use automated tools (like AccessibilityMonitor) and manual testing
  3. Remediation: Fix issues systematically by priority
  4. Documentation: Maintain an accessibility statement
  5. Continuous Monitoring: Accessibility is ongoing, not one-time

Was this article helpful?