accessibility-compliance
1. Overview
WCAG (Web Content Accessibility Guidelines) 2.1/2.2 are the international standards published by the W3C for making web content accessible to people with disabilities. Approximately 15% of the world population — over 1 billion people — live with some form of disability, including visual, auditory, motor, and cognitive impairments. Accessibility is also a legal requirement in many jurisdictions: the Americans with Disabilities Act (ADA) in the US, the European Accessibility Act (EAA) in the EU, and Section 508 for US federal agencies. WCAG defines three conformance levels: Level A (minimum baseline, must fix), Level AA (the standard target for legal compliance and production websites), and Level AAA (enhanced accessibility, aspirational for most sites). All code produced should target WCAG 2.1 Level AA at minimum, incorporating 2.2 criteria where applicable.
2. The Four Principles (POUR)
Every WCAG success criterion falls under one of four principles:
| Principle | Meaning | Key Success Criteria |
|---|---|---|
| Perceivable | Information and UI must be presentable in ways users can perceive | 1.1.1 Non-text Content, 1.2.x Time-based Media, 1.3.x Adaptable, 1.4.3 Contrast (Minimum), 1.4.4 Resize Text, 1.4.11 Non-text Contrast |
| Operable | UI components and navigation must be operable by all users | 2.1.1 Keyboard, 2.1.2 No Keyboard Trap, 2.4.3 Focus Order, 2.4.7 Focus Visible, 2.5.5 Target Size, 2.5.8 Target Size (Minimum) |
| Understandable | Information and UI operation must be understandable | 3.1.1 Language of Page, 3.2.1 On Focus, 3.2.2 On Input, 3.3.1 Error Identification, 3.3.2 Labels or Instructions |
| Robust | Content must be compatible with current and future assistive technologies | 4.1.1 Parsing, 4.1.2 Name/Role/Value, 4.1.3 Status Messages |
3. Semantic HTML (Foundation)
Semantic HTML is the single most impactful accessibility practice. Native HTML elements carry built-in roles, keyboard behavior, and screen reader announcements that no amount of ARIA can fully replicate. Always prefer native elements over custom constructs.