WCAG 2.2 map by theme - AAA version

This diagram groups all the success criteria from the Web Content Accessibility Guidelines (WCAG) by theme, in version 2.2, levels A, AA and AAA.

It illustrates the practical links between each criterion which may not be apparent in the guideline names. For example, all the criteria that can be tested using a keyboard are on one line.

Other versions:

Map

Web content accessibility guidelines map resembling an underground train map. Fuller description follows the image.

Description

The map resembles an underground train map, showing 86 success criteria as stations across 8 lines.

Each station marker shows whether a criterion is level A, AA or AAA. The 4 WCAG principles are identifiable from the first digit of each label:

Each line is described in detail in the next sections. Some criteria names are slightly simplified.

Keyboard

These criteria ensure functionality works predictably with a keyboard, having visible focus states.

The line is solid blue. It runs from west to north.

Number Success criterion Level Interchanges
2.5.6 Concurrent input mechanisms AAA
1.4.13 Content on hover or focus AA
2.1.1 Keyboard A none
2.1.3 Keyboard (no exception) AAA none
2.1.2 No keyboard trap A none
2.1.4 Character key shortcuts A none
2.4.1 Bypass blocks A none
2.4.3 Focus order A none
2.4.7 Focus visible AA
2.4.13 Focus appearance new AAA
2.4.11 Focus not obscured new AA none
2.4.12 Focus not obscured (enhanced) new AAA none
3.2.1 On focus A none
3.2.2 On input A
4.1.2 Name, role, value A
3.2.5 Change on request AAA

Zoom & legibility

These criteria ensure that text is:

The line is dark red with two inner white lines. It runs westwards from west of the centre.

Number Success criterion Level Interchanges
1.4.8 Visual presentation AAA
1.4.6 Contrast (enhanced) AAA
1.4.3 Contrast AA
1.4.5 Images of text AA
1.4.9 Images of text (no exception) AAA
1.4.4 Resize text AA none
1.4.10 Reflow AA
1.4.12 Text spacing AA none
1.4.13 Content on hover or focus AA

Sensory

These criteria prevent content from being reliant on particular senses, by:

The line is yellow with a black border. It mainly running from north west to east, looping back onto itself from Audio/Video Only onwards. The criteria relating to Audio Descriptions also split into two branches, with Extended Audio Description and Media Alternative (AAA) on a separate branch to the others.

Number Success criterion Level Interchanges
2.4.7 Focus visible AA
2.4.13 Focus appearance new AAA
1.4.11 Non-text contrast AA none
1.4.8 Visual presentation AAA
1.4.6 Contrast (enhanced) AAA
1.4.3 Contrast AA
1.4.1 Use of colour A none
1.4.9 Images of text (no exception) AAA
1.4.5 Images of text AA
1.1.1 Non-text content A
1.3.3 Sensory characteristics A
1.2.1 Audio/video only A
1.2.9 Audio-only (live) AAA
1.2.2 Captions (prerecorded) A
1.2.4 Captions (live) AA
1.2.5 Audio description AA
1.2.3 Audio description or media alternative A
1.2.7 Extended audio description AAA
1.2.8 Media alternative AAA
1.2.6 Sign language AAA
1.4.2 Audio control A none
1.4.7 Low or no background audio AAA none
2.2.1 Timing adjustable A
2.2.3 No timing AAA
2.2.2 Pause, stop, hide A none
2.2.4 Interruptions AAA none
2.3.2 Three flashes AAA none
2.3.1 Three flashes (or below threshold) A none
2.3.3 Animation from interactions AAA none

Code & Labels

These criteria make content compatible with assistive technology by being:

Forms have an additional set of criteria.

The line is black with a white border. It mainly runs from south to north.

Number Success criterion Level Interchanges
3.1.2 Language of parts AA
3.1.1 Language of page A
2.4.2 Page titled A
1.1.1 Non-text content A
1.3.1 Info and relationships A
1.3.2 Meaningful sequence A
2.4.4 Link purpose (in context) A
2.4.9 Link purpose (link only) AAA
2.4.6 Headings and labels AA
2.4.10 Section headings AAA none
2.5.3 Label in name A
3.3.2 Labels or instructions A
3.2.2 On input A
4.1.2 Name, role, value A
4.1.3 Status messages AA

Forms

These criteria help ensure usable forms that:

The line is green with a single inner white line. It mainly runs from east of centre to the north. It loops back onto itself from Sensory Characteristics onwards.

Number Success criterion Level Interchanges
2.2.1 Timing adjustable A
2.2.3 No timing AAA
2.2.5 Re-authenticating AAA none
2.2.6 Timeouts AAA none
1.3.3 Sensory characteristics A
1.3.5 Identify input purpose AA none
1.3.6 Identify purpose AAA none
2.5.3 Label in name A
3.3.2 Labels or instructions A
3.2.2 On input A
4.1.2 Name, role, value A
4.1.3 Status messages AA
3.2.5 Change on request AAA
3.3.1 Error identification A
3.3.3 Error suggestion AA
3.3.4 Error prevention (legal, financial, data) AA
3.3.6 Error prevention (all) AAA
3.3.5 Help AAA
3.3.7 Redundant entry new A none
3.3.9 Accessible authentication (enhanced) new AAA none
3.3.8 Accessible authentication new AA none

Gestures

These criteria ensure that functionality:

The line is cyan with a black border and a black inner line. It runs in a loop in the south west.

Number Success criterion Level Interchanges
1.4.13 Content on hover or focus AA
1.3.4 Orientation AA none
1.4.10 Reflow AA
2.5.1 Pointer gestures A none
2.5.2 Pointer cancellation A none
2.5.4 Motion actuation A none
2.5.7 Dragging movements new AA none
2.5.5 Target size (enhanced) AAA none
2.5.8 Target size new AA none
2.5.6 Concurrent input mechanisms AAA

Whole site

These criteria need to be tested across a whole site, to ensure:

The line is pink with two inner black lines. It runs from south to south east.

Number Success criterion Level Interchanges
2.4.2 Page titled A
2.4.5 Multiple ways AA none
2.4.8 Location AAA none
3.2.3 Consistent navigation AA none
3.2.4 Consistent identification AA none
3.2.6 Consistent help new A none

Wording

The following criteria ensure that:

The line is two thick orange lines on a white background. It runs north-eastwards from the south west, looping upon itself from Page Titled onwards. It overlaps large parts of the Code & Labels, Forms and Sensory lines.

Number Success criterion Level Interchanges
3.1.6 Pronunciation AAA none
3.1.5 Reading level AAA none
3.1.4 Abbreviations AAA none
3.1.3 Unusual words AAA none
3.1.2 Language of parts AA
3.1.1 Language of page A
2.4.2 Page titled A
1.1.1 Non-text content A
1.3.1 Info and relationships A
1.3.2 Meaningful sequence A
2.4.4 Link purpose (in context) A
2.4.9 Link purpose (link only) AAA
2.4.6 Headings and labels AA
3.3.1 Error identification A
3.3.3 Error suggestion AA
3.3.4 Error prevention (legal, financial, data) AA
3.3.6 Error prevention (all) AAA
3.3.5 Help AAA
1.3.3 Sensory characteristics A
1.2.1 Audio/video only A
1.2.9 Audio-only (live) AAA
1.2.2 Captions (prerecorded) A
1.2.4 Captions (live) AA
1.2.5 Audio description AA
1.2.3 Audio description or media alternative A
1.2.7 Extended audio description AAA
1.2.8 Media alternative AAA
1.2.6 Sign language AAA

Alternatives and thanks

Alternative versions and thanks messages are on the AA map page.

Licence

Thanks for visiting! This work is licensed under Creative Commons: CC BY-NC 4.0CC logoattribution icon - personnon-commercial icon - dollar sign crossed out

I'm happy for anyone to use or adapt this map but please: