Making accessibility standards easy to understand, one success criterion at a time.

responsibility: Design

Collection of success criterion where the responsibility falls under visual and interaction design decisions.

WCAG 2.2 Level AAA

2.4.12 Focus Not Obscured (Enhanced)

The keyboard focus is fully visible at all times.

Keyboard
Cognitive, Physical/Motor, Visual
Code, Design
WCAG 2.2 Level AAA

2.4.13 Focus Appearance

Focus indicators are at least 2px thick and have a 3:1 contrast ratio against adjacent colors.

Keyboard, Sensory
Cognitive, Physical/Motor, Visual
Code, Design
WCAG 2.0, 2.1, 2.2 Level AA

2.4.5 Multiple Ways

Header navigation is not the only way to get around a website; there’s another way, such as on-page links, a sitemap, or a site-wide search.

Whole Site
Cognitive, Visual
Design
WCAG 2.0, 2.1, 2.2 Level AA

2.4.7 Focus Visible

There’s visible keyboard focus styling to indicate which element you’re currently focused on.

Keyboard, Sensory
Cognitive, Physical/Motor, Visual
Code, Design
WCAG 2.0, 2.1, 2.2 Level AAA

2.4.8 Location

The user is clearly informed where they are in a set of pages.

Whole Site
Cognitive, Visual
Code, Design
WCAG 2.0, 2.1, 2.2 Level AAA

2.4.9 Link Purpose (Link Only)

It is clear where a link will take you from the link text alone, without having to read the text around it.

Code and Labels, Wording
Cognitive, Visual
Code, Content, Design
WCAG 2.1, 2.2 Level AAA

2.5.5 Target Size (Enhanced)

Anything clickable should be at least 44 by 44 pixels, except links within a sentence which are okay to be the size of the text they encompass.

Gestures
Physical/Motor, Visual
Design
WCAG 2.2 Level AA

2.5.8 Target Size (Minimum)

Clickable elements must be at least 24 by 24 pixels, except for inline links.

Gestures
Physical/Motor
Design
WCAG 2.0, 2.1, 2.2 Level A

3.2.1 On Focus

Nothing unexpected changes when something on the page receives keyboard focus, like a <button>

Keyboard
Cognitive
Code, Design
WCAG 2.0, 2.1, 2.2 Level AA

3.2.3 Consistent Navigation

Navigation is consistent from page to page.

Whole Site
Cognitive
Design