Detailed WCAG 2.1 & 2.2 AA Compliance Checks
Use this checklist to validate conformance to WCAG 2.1 / 2.2 Level AA. Items are grouped by the four WCAG principles — Perceivable, Operable, Understandable, Robust — with clear “what to check” and test methods.
About WCAG 2.1 & 2.2
WCAG 2.1 adds criteria for mobile, low vision, and cognitive needs; WCAG 2.2 further improves usability with new criteria such as Focus Not Obscured, Dragging Movements, Target Size (Minimum), Redundant Entry, and Accessible Authentication. Most organizations target Level AA.
New in 2.2 (AA highlights): 2.4.11 Focus Not Obscured · 2.5.7 Dragging Movements · 2.5.8 Target Size (Minimum) ·
3.2.6 Consistent Help · 3.3.7 Redundant Entry · 3.3.8 Accessible Authentication.
1. Perceivable
| Criterion | Requirement | How to Test |
|---|---|---|
| 1.1.1 Text Alternatives (A) | All informative images, icons, and controls have meaningful alt / accessible names. | Inspect DOM & Accessibility Tree; verify concise, contextual alt text. Decorative images use alt="". |
| 1.2.x Time-based Media (A/AA) | Captions for video; transcripts for audio; audio description where needed. | Play media; verify accuracy and synchronization; ensure controls are accessible. |
| 1.3.1 Info & Relationships (A) | Use proper headings, lists, tables with headers, and form labels. | Check semantic HTML and ARIA mappings; heading outline is logical (h1→h2→h3). |
| 1.4.3 Contrast (AA) | Text contrast ≥ 4.5:1 (3:1 for large text). | Use contrast checker for text on all states (default/hover/focus/disabled). |
| 1.4.11 Non-text Contrast (AA) | UI component boundaries, focus states, icons ≥ 3:1. | Visually inspect and measure key UI affordances. |
| 1.4.10 Reflow (AA) | No horizontal scroll at 400% zoom (320 CSS px). | Zoom to 400%; verify responsive reflow and readable line lengths. |
2. Operable
| Criterion | Requirement | How to Test |
|---|---|---|
| 2.1.1 Keyboard (A) | All interactive elements are operable via keyboard. | Navigate using Tab/Shift+Tab/Enter/Space; ensure no traps. |
| 2.4.3 Focus Order (A) | Focus follows meaningful sequence, matching reading order. | Tab through UI; confirm logical flow between elements. |
| 2.4.7 Focus Visible (AA) | Clear focus indicator on all interactive elements. | Check contrast and visibility of focus under themes/zoom. |
| 2.4.11 Focus Not Obscured (2.2 AA) | Focused element is not hidden by sticky headers, dialogs, etc. | Tab into content with sticky bars; ensure focused item is visible. |
| 2.5.7 Dragging Movements (2.2 AA) | Provide single-pointer alternative to drag (e.g., click/tap controls). | Try using draggable widgets without dragging. |
| 2.5.8 Target Size (Minimum) (2.2 AA) | Minimum 24×24 CSS px or sufficient spacing. | Measure in DevTools; confirm practical hit area. |
3. Understandable
| Criterion | Requirement | How to Test |
|---|---|---|
| 3.1.1 Language of Page (A) | lang attribute correctly set on <html>. |
Inspect root element: e.g., lang="en". |
| 3.2.3 Consistent Navigation (AA) | Menus appear in the same order across pages. | Compare templates; ensure consistency. |
| 3.3.1 Error Identification (A) | Errors clearly identified and tied to fields. | Trigger validation; check visible text + programmatic association. |
| 3.3.3 Error Suggestion (AA) | Offer text suggestions to fix errors where possible. | Submit bad inputs; confirm specific guidance is shown and announced. |
| 3.2.6 Consistent Help (2.2 AA) | Help (e.g., chat, contact) appears consistently across pages where offered. | Navigate multiple pages; verify predictable placement. |
| 3.3.7 Redundant Entry (2.2 AA) | Avoid re-entering info already provided; reuse and autofill appropriately. | Test multi-step forms; ensure values persist or are prefilled. |
| 3.3.8 Accessible Authentication (2.2 AA) | No cognition-only tasks; allow copy/paste, password managers, device auth. | Try login with pasted creds and password manager; avoid puzzles. |
4. Robust
| Criterion | Requirement | How to Test |
|---|---|---|
| 4.1.1 Parsing (A) | Valid HTML; elements properly nested; unique IDs. | Run W3C Validator; fix markup errors. |
| 4.1.2 Name, Role, Value (A) | Interactive widgets expose correct semantics to AT. | Inspect Accessibility Tree; verify ARIA roles/states only when needed. |
| 4.1.3 Status Messages (AA) | Important updates announced without moving focus. | Trigger toasts/alerts; verify announcements in screen reader. |
Tip: Combine automated scans (axe, WAVE, Lighthouse) with manual keyboard and screen reader testing.
Testing Workflow & Reporting
- 🔍 Automated: axe DevTools, WAVE, Lighthouse to catch easy issues.
- ⌨️ Keyboard: Full navigation including menus, dialogs, widgets.
- 🦻 Screen Reader: NVDA/JAWS/VoiceOver; verify headings, landmarks, labels, announcements.
- 🎨 Visual: Contrast, focus visibility, 400% zoom, reflow.
- 📋 Report: Log by WCAG criterion with severity and remediation guidance.