A11y Patterns

WCAG 2.1 Reference

Web Content Accessibility Guidelines — the international web accessibility standard. Requirements increase from A → AA → AAA.

4 Principles (POUR)

1Perceivable

Information and UI components must be presentable to users in ways they can perceive.

2Operable

UI components and navigation must be operable.

3Understandable

Information and the operation of the user interface must be understandable.

4Robust

Content must be robust enough to be reliably interpreted by a wide variety of user agents, including assistive technologies.

Conformance levels

Level A

The minimum level. Failing to meet these criteria means some users cannot access content at all.

CriterionTitleRequirement
1.1.1Non-text ContentProvide alt text for all non-text content (images, icons).
1.3.1Info and RelationshipsUse HTML structure (headings, lists, tables) to convey visual structure in code.
2.1.1KeyboardAll functionality must be accessible using only a keyboard.
2.4.2Page TitledEach page must have a unique title that describes its topic.
3.1.1Language of PageSpecify the document language using the html[lang] attribute.
4.1.1ParsingNo HTML markup errors (duplicate IDs, unclosed tags, etc.).
4.1.2Name, Role, ValueExpose role, aria-label, aria-expanded, and other states for UI components.
Level AA

The de-facto standard. Most laws and corporate policies require AA conformance. This project targets AA.

CriterionTitleRequirement
1.4.3Contrast (Minimum)Normal text 4.5:1, large text 3:1 minimum contrast ratio.
1.4.4Resize TextContent and functionality must be maintained when zoomed to 200%.
1.4.11Non-text ContrastUI components (icons, focus rings, form borders) must meet 3:1 contrast.
1.4.12Text SpacingNo loss of content when line height, letter spacing, word spacing, or paragraph spacing is changed.
1.4.13Content on Hover or FocusContent that appears on hover or focus (like tooltips) must be dismissible and persistent.
2.4.6Headings and LabelsHeadings and labels must describe topic or purpose.
2.4.7Focus VisibleA visible focus indicator must be shown when navigating by keyboard.
3.2.3Consistent NavigationRepeated navigation must appear in the same order across pages.
3.3.1Error IdentificationWhen an error occurs, describe which item is wrong and why, in text.
3.3.2Labels or InstructionsProvide labels or instructions for user input.
Level AAA

The highest level. Difficult to apply to all content universally — applied selectively in specific contexts.

CriterionTitleRequirement
1.4.6Contrast (Enhanced)Normal text 7:1, large text 4.5:1 minimum contrast ratio.
2.1.3Keyboard (No Exception)All functionality usable by keyboard, including path-dependent interactions.
2.2.3No TimingNo time limits on any functionality, unless the timing is essential.
2.4.9Link Purpose (Link Only)Avoid ambiguous link text like "Read more" — link purpose must be clear from the link alone.
3.1.3Unusual WordsProvide definitions for jargon, idioms, and specialized terminology.
3.3.6Error Prevention (All)All input forms must provide review, confirmation, or reversal of submissions.

Full specification: W3C WCAG 2.1