WCAG 2.2 checklist for developers

What changed in WCAG 2.2

WCAG 2.2 became a W3C Recommendation in October 2023. It keeps everything from 2.1, removes one criterion, and adds nine new ones. Six of the new criteria are at levels A and AA, which is the level most accessibility policies and contracts ask for:

The other three new criteria (2.4.12, 2.4.13 and 3.3.9) are at level AAA. Criterion 4.1.1 Parsing was removed, because modern browsers and assistive technologies all parse HTML the same way. Duplicate ids still matter when they break a label or an ARIA reference, and those cases are covered by 1.3.1 and 4.1.2.

A, AA and AAA in practice

Level A is the floor: without it, some people cannot use the page at all. Level AA adds the criteria that make a page comfortable for most people, such as 4.5:1 text contrast and visible focus. It is the usual target. Level AAA is not required for whole sites, but some of its criteria are cheap wins, such as 7:1 contrast for body text or respecting reduced motion. a11ymedic checks level AA by default; add --level AAA to include the enhanced 7:1 contrast check.

The checklist, by area

Each item names the criterion. Items marked tool are checked automatically by a11ymedic; the rest need a manual check. The WCAG cheat sheet has a plain language summary and a manual tip for every criterion.

Images and media

• Every informative image has a useful text alternative, decorative ones have alt="" (1.1.1, tool, plus a human read).
• Recorded video has captions (1.2.2, tool finds missing caption tracks), audio has a transcript (1.2.1), and visual information is described (1.2.3, 1.2.5).
• Live video has live captions (1.2.4).
• No sound plays on its own for more than 3 seconds without a pause control (1.4.2, tool).

Structure and reading order

• Headings, lists, tables, landmarks and labels exist in the code, not only in the styling (1.3.1, tool).
• The reading order in the code matches the visual order (1.3.2).
• Every page has a unique, descriptive title (2.4.2, tool) and a way to skip repeated navigation (2.4.1, tool).
• Headings and labels describe their content (2.4.6, tool for empty headings and a missing h1).
• There is more than one way to find a page, such as navigation plus search (2.4.5).

Color and visual presentation

• Text contrast is at least 4.5:1, or 3:1 for large text (1.4.3, tool). The contrast guide shows how to fix it without losing your brand.
• Controls and meaningful graphics have 3:1 contrast against their surroundings (1.4.11).
• Color is never the only way information is shown (1.4.1).
• Text can be zoomed to 200 percent, and pinch zoom is not disabled (1.4.4, tool for the viewport tag).
• Content reflows at 320 CSS pixels wide without sideways scrolling (1.4.10), survives larger text spacing (1.4.12), and hover content can be dismissed (1.4.13).
• No real text is baked into images (1.4.5) and the page works in both orientations (1.3.4).

Keyboard, focus and pointer

• Everything works with the keyboard (2.1.1, tool for click handlers on non interactive elements) and focus never gets trapped (2.1.2).
• Focus order makes sense (2.4.3, tool for positive tabindex) and focus is always visible (2.4.7, tool for removed outlines).
• The focused element is never fully hidden by sticky content (2.4.11, new).
• Single key shortcuts can be turned off or remapped (2.1.4).
• Gestures and drags have single pointer alternatives (2.5.1, 2.5.7 new), actions fire on release (2.5.2), and motion triggers have a button (2.5.4).
• Targets are at least 24 by 24 CSS pixels (2.5.8 new, tool) and the visible label is part of the accessible name (2.5.3, tool).

Forms and authentication

• Every field has a label or instructions (3.3.2, tool) and personal fields have a valid autocomplete (1.3.5, tool).
• Errors are identified in text (3.3.1), come with a suggestion (3.3.3), and important submissions can be reviewed or undone (3.3.4).
• Information is not asked for twice (3.3.7 new) and login allows paste and password managers (3.3.8 new, tool for blocked paste).
• Changing a field or moving focus never causes a surprise navigation (3.2.1, 3.2.2).

Language, consistency and robustness

• The page has a valid lang (3.1.1, tool) and passages in other languages are marked (3.1.2, tool for invalid codes).
• Navigation, component names and help stay consistent across pages (3.2.3, 3.2.4, 3.2.6 new).
• Every control has a name, a role and correct states (4.1.2, tool for most ARIA mistakes), and status messages are announced (4.1.3).
• Nothing flashes more than 3 times per second (2.3.1), moving content can be paused (2.2.2, tool for marquee, blink and autoplay), and time limits can be extended (2.2.1, tool for meta refresh).

Automate the tool items

Run the automated part on every change so you only spend human time on the manual items.

npx a11ymedic "src/**/*.html"                  # levels A and AA (default)
npx a11ymedic "src/**/*.html" --level AAA      # include the AAA rules
npx a11ymedic https://example.com --format md -o wcag-report.md

import { audit } from "a11ymedic";

const result = await audit(html, { level: "AA" });
const byCriterion = new Map();
for (const f of result.findings) {
  for (const c of f.wcag) {
    byCriterion.set(c.id, (byCriterion.get(c.id) ?? 0) + 1);
  }
}
console.log(byCriterion); // Map { "1.1.1" => 3, "1.4.3" => 5, ... }

Meeting the new 2.2 criteria

Target size. The simplest way to pass 2.5.8 is a minimum size on every small control. Padding counts, so an icon can stay 16 pixels while its button is 24 or more. Links inside a sentence are exempt.

/* 2.5.8: at least 24 by 24 CSS pixels */
.icon-button {
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
}

/* 2.4.11: keep focused elements clear of a 64px sticky header */
html {
  scroll-padding-top: 72px;
}

Focus not obscured. When a sticky header or a cookie banner sits on top of the page, keyboard focus can land on an element hidden behind it. scroll-padding makes the browser scroll focused elements into the visible area. Also check that banners do not cover the bottom of the screen indefinitely.

Dragging. Give every draggable item a button based alternative, such as "Move up" and "Move down", or a menu to choose a destination column.

<li draggable="true">
  Write release notes
  <button type="button">Move up</button>
  <button type="button">Move down</button>
</li>

Accessible authentication. Allow paste in every login field, use autocomplete="current-password" and autocomplete="one-time-code", and if you use a puzzle, offer an alternative such as an email link. Redundant entry and consistent help are design decisions: add a "same as shipping address" checkbox, and keep the help link in one place in your layout.

To start testing, see the website accessibility checker guide or jump to the install section.