WCAG 2.2 map by theme

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

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. The structure is largely based on the WCAG decision tree that goes into more detail on how to test for each criterion.

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 55 success criteria as stations across 7 lines.

Each station marker shows whether a criterion is level A or AA. The 4 WCAG principles are depicted with thin grey lines as zones moving outwards from the centre:

Each line is described in detail in the next sections.

These amazing alternative projects use the same groupings:

The map concept was originally inspired by Intopia's fantastic WCAG 2.2 map with a desire to approach the criteria from a slightly different angle.

Keyboard

These criteria ensure functionality works predictably with a keyboard.

The line is blue, running from west to north.

Number Success criterion Level Interchanges
1.4.13 Content on hover or focus AA
2.1.1 Keyboard A 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.11 Focus not obscured AA none
3.2.1 On focus A none
3.2.2 On input A
4.1.2 Name, role, value A

Zoom & legibility

These criteria ensure that text is:

The line is red, mainly running westwards from west of the centre.

Number Success criterion Level Interchanges
1.4.3 Contrast AA
1.4.5 Images of text AA
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, mainly running from north west to east, looping back onto itself from Sensory Characteristics onwards.

Number Success criterion Level Interchanges
2.4.7 Focus visible AA
1.4.11 Non-text contrast AA none
1.4.3 Contrast AA
1.4.1 Use of colour A none
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 none
1.2.2 Captions (prerecorded) A none
1.2.4 Captions (live) AA none
1.2.5 Audio description AA none
1.2.3 Audio description or media alternative A none
1.4.2 Audio control A none
2.2.1 Timing adjustable A
2.2.2 Pause, stop, hide A none
2.3.1 Three flashes (or below threshold) A none

Code & Labels

These criteria make content compatible with assistive technology by being:

Forms have an additional set of criteria.

The line is black, mainly running from south to north.

Number Success criterion Level Interchanges
3.1.2 Language of parts AA none
3.1.1 Language of page A none
2.4.2 Page titled A
1.1.1 Non-text content A
1.3.1 Info and relationships A none
1.3.2 Meaningful sequence A none
2.4.4 Link purpose A none
2.4.6 Headings and labels AA none
2.5.3 Label in name A none
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, mainly running from east of centre to north. It loops back onto itself from Identify Input Purpose onwards.

Number Success criterion Level Interchanges
2.2.1 Timing adjustable A
1.3.3 Sensory characteristics A
1.3.5 Identify input purpose AA none
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.3.1 Error identification A none
3.3.3 Error suggestion AA none
3.3.4 Error prevention AA none
3.3.7 Redundant entry A none
3.3.8 Accessible authentication AA none

Gestures

These criteria ensure that functionality:

The line is cyan, running 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 AA none
2.5.8 Target size AA none

Whole site

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

The line is pink, running from south to south east.

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

Licence

Thanks for looking! 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 as long as: