WCAG 2.2 Demo Suite

Web accessibility, demonstrated

A complete teaching suite for WCAG 2.2. Every one of the 86 success criteria — Level A, AA and AAA — has a page you can break, a page you can test, and a procedure for telling the difference.

How this suite is built

Reading a guideline rarely teaches you to spot a violation. So every criterion here comes as a matched pair: a failing page and a passing page that differ only in the thing the criterion is about. You open both, test both, and feel the difference with a keyboard and a screen reader before you read a word of explanation.

The test suite is part of the lesson

Running npm run test:a11y asserts that each pass.html is clean and that each fail.html actually breaks the rule it claims to break. Where no scanner can detect the criterion at all, the run says so out loud. Of the 86 criteria, 38 are partly detectable by automation and 48 cannot be detected by any tool. That output is the most honest lesson in the whole suite: automation is a smoke alarm, not a fire inspection.

Where to start

  • 1. Browse the criteria

    All 86 criteria, filterable by level, by WCAG version, and by whether a machine can test them.

    Open the criteria catalogue

  • 2. Learn to test

    Keyboard scripts, screen reader cheat sheets, contrast and reflow procedures, and what automated tools genuinely catch.

    Open the testing guides

  • 3. Run a real evaluation

    The five steps of WCAG-EM, applied to a deliberately broken sample site, ending in a report you write yourself.

    Start the WCAG-EM walkthrough

  • 4. Fix broken pages

    Graded exercises from a single mislabelled image up to auditing and reporting on a whole site section.

    Open the exercises

What the conformance levels mean

WCAG 2.2 conformance levels and what claiming them requires
Level Criteria in this level Total needed to claim it What it means in practice
Level A 31 31 The floor. Failing any of these blocks some group of users from the content entirely.
Level AA 24 55 The working standard. This is what most legislation, procurement rules and accessibility statements actually require.
Level AAA 31 86 The ceiling. W3C explicitly does not recommend AAA as a blanket policy for a whole site, because some content cannot satisfy it. Apply it selectively.

Conformance is cumulative and unforgiving: a single failed Level A criterion on one page means that page does not conform at any level. There is no partial credit and no percentage score, which is why how you choose the pages you audit matters so much.

A warning about the broken pages

Do not copy from fail.html

Every file named fail.html, and the whole sample site used in the evaluation walkthrough, contains deliberate accessibility failures. They exist to be found and fixed. The code you should copy lives in pass.html.

About this build

Plain HTML, CSS and vanilla JavaScript. No framework, no bundler, no build output to install — every page opens directly from the filesystem, so you can read the real markup with View Source and copy it straight into your own work. Node is used only for the development tooling: the scanners, the link checker and the page generators.

The site holds itself to the standard it teaches. Its own pages target Level AA throughout, and Level AAA wherever that does not conflict with a demonstration. If you find a failure in the chrome, that is a bug — and a good exercise.