WCAG 2.2 AA: The practical checklist

What is WCAG 2.2?

The Web Content Accessibility Guidelines (WCAG) are the W3C’s guidelines for accessible web content. Version 2.2 has been a W3C Recommendation since 5 October 2023. It groups its requirements under four principles: perceivable, operable, understandable and robust.

Under the principles sit guidelines, and under those, testable success criteria at levels A, AA and AAA. WCAG 2.2 keeps the criteria from WCAG 2.1 except one: 4.1.1 Parsing has been removed as obsolete. There are nine new criteria, six of them at levels A and AA.

Each criterion has an Understanding document explaining its purpose, with examples and techniques. The Quick Reference can be filtered by level and topic and works well as a checklist for your team.

What does conformance at level AA mean?

For AA, all criteria at levels A and AA must be met. WCAG sets out five conformance requirements for this: the level itself, full pages, complete processes, only accessibility-supported ways of using technologies, and non-interference by other content.

The process rule is especially important in practice. If a page is part of a multi-step process such as a checkout, every page in that process must meet the level. An inoperable payment step therefore prevents the whole ordering process from conforming. The W3C expressly does not recommend AAA as a general requirement for an entire website, because some content cannot meet all AAA criteria.

Is WCAG 2.2 required by law?

WCAG is a technical guideline, not a German law. The BFSG and BITV 2.0 (the German federal regulation on accessible information technology) require digital services to be perceivable, operable, understandable and robust. Both link a presumption of conformity to harmonised standards whose references are published in the Official Journal of the EU.

Which standard and which version of WCAG apply to your project depends on the relevant legal or contractual framework. WCAG 2.2 AA still makes sense as a project goal: if you meet it, you also cover the criteria of the previous version, apart from the removed parsing criterion. Record your goal in writing, with version and level. For federal public bodies, the monitoring body under § 3(5) BITV 2.0 publishes up-to-date information on the standards to be applied.

What belongs on a WCAG checklist?

1. 1Images (1.1.1): Describe informative images according to their purpose. Decorative images get an empty text alternative.
2. 2Structure (1.3.1): Use real headings, lists, tables and semantic HTML. Make sure the reading order makes sense.
3. 3Contrast (1.4.3, 1.4.11): Normal text needs at least 4.5:1; large text of 18 point or more, or 14 point bold, needs at least 3:1. Controls and important graphics need at least 3:1 against their surroundings.
4. 4Media (1.2.2, 1.2.5): Pre-recorded videos with sound need captions. For important visual information, level AA requires audio description.
5. 5Resizing (1.4.4, 1.4.10): Text must be resizable to 200 per cent. At a width of 320 CSS pixels, content should remain readable without horizontal scrolling.
6. 6Keyboard (2.1.1, 2.1.2, 2.4.7): All functions can be operated by keyboard, focus is visible and never gets stuck in an element.
7. 7Orientation (2.4.2, 2.4.4): Every page has a descriptive title, and the purpose of a link is clear from the link text or its context.
8. 8Language (3.1.1): The main language of the page is set in the lang attribute so that screen readers pronounce it correctly.
9. 9Forms (3.3.1, 3.3.2): Connect visible labels to their fields. Explain input errors and possible corrections.
10. 10Technology (4.1.2): Custom controls pass their name, role and state on to assistive technologies.

What is new in WCAG 2.2?

1. 12.4.11 Focus Not Obscured (AA): A focused element must not be completely hidden by your own content, such as a fixed header or cookie banner.
2. 22.5.7 Dragging Movements (AA): Anything that works by dragging needs an alternative using a simple click or tap.
3. 32.5.8 Target Size (AA): Click targets are at least 24 × 24 CSS pixels or have enough spacing. There are exceptions, for example for links in running text.
4. 43.2.6 Consistent Help (A): Recurring help options such as contact details or chat appear in the same relative place on every page.
5. 53.3.7 Redundant Entry (A): Information already entered in the same process is filled in automatically or offered for selection.
6. 63.3.8 Accessible Authentication (AA): Logging in does not require a cognitive function test such as a puzzle, unless there is an alternative or help.

Which WCAG criteria can a tool check automatically?

Automated tools reliably detect when something is technically missing: an alt attribute, the page language, a name for a form field or sufficient contrast for plain text. They cannot judge whether an alt text conveys the right message, whether the focus order makes sense or whether an error message is understandable.

The Accessonaut check uses axe-core to test rules that can be checked automatically and shows findings by importance. Its score describes the tested rules and pages at the time of the scan. It does not tell you whether all WCAG criteria are met. So always plan a manual review for pages with images, forms or media.

How do you work through the checklist as a team?

Start with the level A criteria, because they cover the most fundamental barriers. Check new components at the design stage, for example contrast, focus indicators and target sizes. What is right in the design does not need rebuilding after going live.

1. 1Choose a real journey, for example selecting and ordering a product.
2. 2Collect automated findings and assign each one to the affected step.
3. 3Add manual checks and note the device, browser and result.
4. 4Fix the problem in the shared component if it affects several pages.
5. 5Test the same journey again after the change and document the result.