LESSON 27 · ADVANCED4 min read

WCAG 2.2 Principles (POUR), Conformance Levels (A, AA, AAA), and New Criteria

Master digital accessibility standards: the Web Content Accessibility Guidelines (WCAG 2.2), the four foundational POUR principles, conformance tiers (A, AA, AAA), and new 2.2 success criteria.

HTML5 / Living StandardFree to readModule 7 of 8

YOUR NEXT SMALL WINS

By the end, you’ll be able to…

Dissect the four foundational pillars of WCAG: Perceivable, Operable, Understandable, and Robust (POUR)
Differentiate between Conformance Levels A, AA (the global legal standard), and AAA
Implement modern WCAG 2.2 criteria: Target Size Minimum (24x24 CSS pixels), Focus Appearance, and Redundant Entry prevention

01The Four Pillars of Digital Accessibility: POUR

The Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C), form the international legal and technical standard for web accessibility (enshrined in US ADA Title II, Section 508, EU EN 301 549, and global accessibility statutes).

WCAG is structured around four foundational architectural principles known by the acronym POUR:

1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive. Content cannot be invisible to all of a user's senses (e.g. providing text alternatives for images, captions for video).

2. Operable: User interface components and navigation must be operable. Users must be able to operate the interface entirely via keyboard, switch access, or voice commands without requiring a mouse.

3. Understandable: Information and the operation of the user interface must be understandable. Text must be readable, predictable, and provide clear error prevention.

4. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including current and evolving assistive technologies.

index.htmlHTML

<!-- WCAG 2.2 Compliant Interactive Component --><!-- 1. Perceivable: Visible label + screen reader explanation --><!-- 2. Operable: Keyboard accessible button, minimum 24x24px target --><!-- 3. Understandable: Clear instruction and confirmation --><!-- 4. Robust: Native HTML semantic button, no fragile ARIA overrides --><div class="action-card">    <button type="button"             class="touch-target-btn"             aria-describedby="archive-hint">        Archive Project    </button>    <p id="archive-hint" class="helper-text">        Moves the repository to read-only status without deleting commit history.    </p></div><style>    /* WCAG 2.2 Criterion 2.5.8: Target Size (Minimum 24x24px) */    .touch-target-btn {        min-width: 44px;        min-height: 44px;        padding: 8px 16px;        font-size: 1rem;        cursor: pointer;    }</style>

02WCAG Conformance Tiers: A, AA, and AAA

WCAG categorizes success criteria into three hierarchical conformance tiers:

Level A (Minimum Baseline): Essential requirements without which certain user groups cannot access the web at all (e.g., text alternatives for non-text content, keyboard accessibility without traps).

Level AA (Global Enterprise Standard): Addresses the most common barriers for disabled users (e.g., 4.5:1 text color contrast, synchronized captions, visible focus indicators, responsive reflow without horizontal scrolling). Level AA is the universal standard required by law worldwide.

Level AAA (Specialized Enhancement): Advanced criteria for specialized software (e.g., 7:1 contrast ratios, sign language interpretation, sign language translation). The W3C notes it is generally impossible to satisfy all AAA criteria across an entire general-purpose website.

03Key WCAG 2.2 New Success Criteria

WCAG 2.2 (released in late 2023) introduced critical new criteria for modern mobile and interactive web applications:

1. 2.5.8 Target Size (Minimum) (Level AA): All interactive pointer targets must have an area of at least 24x24 CSS pixels, preventing users with tremors or mobile touch users from accidentally clicking the wrong button.

2. 2.4.11 Focus Not Obscured (Minimum) (Level AA): When an element receives keyboard focus, it must not be completely hidden by sticky headers, footers, or cookie consent banners.

3. 3.3.7 Redundant Entry (Level A): Avoid asking the user to re-enter information previously provided in the same session (e.g. automatically populating billing address with shipping address).

04WCAG Conformance Tier Comparison

A comparison of WCAG conformance levels and legal requirements:

Target full Level AA compliance on all production web software.

notes.txtPlain text

+-----------------------+---------------------+-------------------+-------------------------+| Conformance Level     | Target Scope        | Legal Relevance   | Key Examples            |+-----------------------+---------------------+-------------------+-------------------------+| Level A               | Core Accessibility  | Minimum Legal     | Keyboard operable, alt text| Level AA (Standard)   | Broad Accessibility | Universal Legal   | 4.5:1 contrast, 24px targets| Level AAA             | Deep Specialization | Rarely mandated   | 7:1 contrast, sign language+-----------------------+---------------------+-------------------+-------------------------+

LET IT CLICK

The ideas worth keeping.

POUR (Perceivable, Operable, Understandable, Robust) guides all accessibility evaluations.
WCAG 2.2 Level AA is the worldwide legal benchmark for digital compliance.
Ensure all interactive pointer targets occupy at least 24x24 CSS pixels.

TURN UNDERSTANDING INTO SOMETHING YOU CAN DO

Make it yours.

Edit the starter, press Preview, and see your page render in the browser preview. Compare with the worked solution when ready.

Exercise 1: Write a CSS rule that satisfies WCAG 2 2 Succ

Write a CSS rule that satisfies WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) for an icon button.

your_turn_1.html🌐HTML

Ctrl + ↵

Preview

Press Preview to render your page

Press Preview to render your HTML in the browser preview.

Explore a worked solution

one_possible_solution.htmlHTML

.icon-button {    display: inline-flex;    align-items: center;    justify-content: center;    min-width: 24px;    min-height: 24px;    padding: 8px; /* Extends clickable boundary beyond 24x24 */}

Ensure minimum width and height are at least 24x24 CSS pixels.

Exercise 2: Explain the four core principles of POUR in t

Explain the four core principles of POUR in the context of web accessibility.

your_turn_2.html🌐HTML