Skills Testing and evaluation design-review accessibility/wcag-checklist.md accessibility/wcag-checklist.md A supporting file of the design-review skill.
Comprehensive checklist organized by the four POUR principles. Each criterion includes its WCAG level (A, AA, AAA), priority tier, and testing guidance.
Priority Tiers:
P0 — Must Fix : Legal requirements, blocks users entirelyP1 — Should Fix : Significant usability impactP2 — Nice to Have : Enhances experience, not blocking
Information and UI components must be presentable in ways users can perceive.
# Criterion Level Priority How to Test 1.1.1 Non-text Content — All images, icons, and controls have text alternativesA P0 Check every <img> has meaningful alt; decorative images use alt="" or role="presentation". SVG icons have <title> or aria-label.
# Criterion Level Priority How to Test 1.2.1 Audio/Video (Prerecorded) — Provide captions or transcriptA P0 Verify captions exist for all video content 1.2.2 Captions (Prerecorded) — Synchronized captions for all audio in videoA P0 Play video with captions; verify accuracy and timing 1.2.3 Audio Description — Provide audio description for videoA P1 Check if important visual information is described 1.2.5 Audio Description (Prerecorded) — Audio description for all prerecorded videoAA P1 Full audio description track available
# Criterion Level Priority How to Test 1.3.1 Info and Relationships — Structure conveyed visually is also in markupA P0 Check headings use <h1>–<h6>, lists use <ul>/<ol>, tables use <th>. Forms have <label> associations. 1.3.2 Meaningful Sequence — Reading order matches visual orderA P0 Linearize page (disable CSS) and verify content makes sense 1.3.3 Sensory Characteristics — Instructions don't rely solely on shape, size, position, or soundA P1 Search for "click the round button" or "see the sidebar" — provide alternatives 1.3.4 Orientation — Content not restricted to single display orientationAA P1 Rotate device; verify content adapts 1.3.5 Identify Input Purpose — Input fields identify their purposeAA P1 Check autocomplete attributes on personal data fields
# Criterion Level Priority How to Test 1.4.1 Use of Color — Color is not the only means of conveying informationA P0 View in grayscale; verify information is still clear. Error states need icons, not just red. 1.4.2 Audio Control — Mechanism to pause/stop audio that plays > 3 secA P0 Check autoplay audio has controls 1.4.3 Contrast (Minimum) — Text: 4.5:1, Large text (18px bold/24px): 3:1AA P0 Use contrast checker on all text/background pairs 1.4.4 Resize Text — Text resizable up to 200% without loss of contentAA P0 Zoom browser to 200%; verify no overflow or truncation 1.4.5 Images of Text — Use real text, not images of textAA P1 Check logos are the only images of text 1.4.10 Reflow — Content reflows at 320px width (no horizontal scroll)AA P0 Set viewport to 320px; verify single-column reflow 1.4.11 Non-text Contrast — UI components and graphical objects: 3:1 contrastAA P0 Check borders, icons, focus indicators, chart elements against backgrounds 1.4.12 Text Spacing — Content adapts when user overrides text spacingAA P1 Apply bookmarklet: line-height 1.5×, paragraph spacing 2×, letter spacing 0.12em, word spacing 0.16em 1.4.13 Content on Hover or Focus — Hover/focus content is dismissible, hoverable, persistentAA P1 Tab to tooltips; verify Escape dismisses, content is hoverable
UI components and navigation must be operable.
# Criterion Level Priority How to Test 2.1.1 Keyboard — All functionality available via keyboardA P0 Tab through entire page; verify every interactive element is reachable and operable 2.1.2 No Keyboard Trap — Keyboard focus can always be moved awayA P0 Tab into every component (especially modals, widgets); verify you can Tab or Escape out 2.1.4 Character Key Shortcuts — Single character shortcuts can be remapped/disabledA P1 Identify single-key shortcuts; verify they have a mechanism to remap or disable
# Criterion Level Priority How to Test 2.2.1 Timing Adjustable — Time limits can be extended, turned off, or are > 20 hrsA P0 Find session timeouts, auto-advancing carousels; verify user controls 2.2.2 Pause, Stop, Hide — Moving, blinking, auto-updating content can be pausedA P0 Check carousels, animations, live feeds have pause controls
# Criterion Level Priority How to Test 2.3.1 Three Flashes or Below — No content flashes more than 3 times/secondA P0 Review all animations and video for flash frequency
# Criterion Level Priority How to Test 2.4.1 Bypass Blocks — Skip navigation link or landmark regionsA P0 Verify "Skip to content" link exists; test landmark regions (<main>, <nav>, <aside>) 2.4.2 Page Titled — Pages have descriptive titlesA P0 Check <title> is unique and descriptive per page 2.4.3 Focus Order — Focus order is logical and intuitiveA P0 Tab through page; verify order matches visual layout 2.4.4 Link Purpose (In Context) — Link text describes destinationA P0 Check for "click here", "read more" without context — add aria-label or surrounding context 2.4.5 Multiple Ways — Multiple ways to locate pages (search, sitemap, nav)AA P1 Verify at least two navigation mechanisms exist 2.4.6 Headings and Labels — Headings and labels are descriptiveAA P1 Review heading hierarchy; verify labels match their fields 2.4.7 Focus Visible — Keyboard focus indicator is always visibleAA P0 Tab through page; verify visible focus ring on every focusable element 2.4.11 Focus Not Obscured (Minimum) (WCAG 2.2 NEW) — Focused item is not entirely hidden by sticky headers, footers, or other contentAA P0 Tab through page with sticky elements; verify focused element is at least partially visible 2.4.12 Focus Not Obscured (Enhanced) (WCAG 2.2 NEW) — Focused item is fully visibleAAA P2 Tab through page; no part of focused element is covered 2.4.13 Focus Appearance (WCAG 2.2 NEW) — Focus indicator has sufficient area and contrastAAA P2 Focus ring area ≥ 2px perimeter, 3:1 contrast change
# Criterion Level Priority How to Test 2.5.1 Pointer Gestures — Multi-point gestures have single-pointer alternativesA P1 Check pinch-to-zoom, multi-finger swipes have button alternatives 2.5.2 Pointer Cancellation — Actions fire on up-event, can be abortedA P1 Test that mousedown alone doesn't trigger actions; verify dragging away cancels 2.5.3 Label in Name — Visible label is contained in accessible nameA P0 Compare visible text labels with aria-label/aria-labelledby; visible text must be contained 2.5.4 Motion Actuation — Device motion actions have UI alternativesA P1 Shake-to-undo etc. must have button alternative 2.5.7 Dragging Movements (WCAG 2.2 NEW) — Dragging has non-dragging alternativeAA P1 All drag-and-drop has button/input alternative (up/down arrows, select) 2.5.8 Target Size (Minimum) (WCAG 2.2 NEW) — Touch targets are at least 24×24pxAA P0 Measure all interactive targets; minimum 24×24px or adequate spacing
Information and UI operation must be understandable.
# Criterion Level Priority How to Test 3.1.1 Language of Page — lang attribute on <html>A P0 Check <html lang="en"> (or appropriate language code) 3.1.2 Language of Parts — Content in other languages marked with langAA P1 Find foreign language text; verify lang attribute
# Criterion Level Priority How to Test 3.2.1 On Focus — Focus alone doesn't trigger unexpected context changesA P0 Tab to all elements; verify no auto-submit, navigation, or popup on focus 3.2.2 On Input — Changing a setting doesn't auto-trigger context change without warningA P0 Change selects, toggles; verify no unexpected navigation or submission 3.2.3 Consistent Navigation — Navigation is consistent across pagesAA P1 Compare navigation across 3+ pages; verify consistent order and structure 3.2.4 Consistent Identification — Same function = same label across pagesAA P1 Check "Search", "Submit", "Close" buttons use same labels everywhere 3.2.6 Consistent Help (WCAG 2.2 NEW) — Help mechanisms appear in same relative positionA P1 Verify help/support links, chat widgets are consistently placed
# Criterion Level Priority How to Test 3.3.1 Error Identification — Errors are identified and described in textA P0 Submit invalid form; verify errors are announced (not just red borders) 3.3.2 Labels or Instructions — Form fields have labels or instructionsA P0 Every input has a visible label; complex fields have instructions 3.3.3 Error Suggestion — Provide correction suggestions for known errorsAA P1 Submit wrong format; verify helpful suggestion shown 3.3.4 Error Prevention (Legal, Financial, Data) — Submissions are reversible, verifiable, or confirmableAA P1 Check checkout, delete actions have confirmation or undo 3.3.7 Redundant Entry (WCAG 2.2 NEW) — Don't ask for same information twice unless necessaryA P1 Multi-step forms auto-populate previously entered data 3.3.8 Accessible Authentication (Minimum) (WCAG 2.2 NEW) — Authentication doesn't require cognitive function testAA P0 Login allows password managers, copy-paste; no CAPTCHA without alternative 3.3.9 Accessible Authentication (Enhanced) (WCAG 2.2 NEW) — No object/image recognition required for authAAA P2 No "select all traffic lights" as sole auth method
Content must be robust enough for diverse user agents and assistive technologies.
# Criterion Level Priority How to Test 4.1.2 Name, Role, Value — All UI components have accessible names and rolesA P0 Run axe/WAVE; check custom components expose correct roles, names, and states 4.1.3 Status Messages — Status messages use ARIA live regionsAA P0 Trigger toast, error, success; verify screen reader announces without focus change
Tool What It Catches How to Use axe DevTools ~57% of WCAG issues Browser extension → scan page WAVE Structure, labels, contrast Browser extension → visual overlay Lighthouse Score + specific violations Chrome DevTools → Accessibility audit Pa11y CI/CD integration pa11y https://url in pipelineContrast Checker Color contrast ratios Input FG/BG colors → get ratio Screen Reader Real user experience VoiceOver (Mac), NVDA (Win), Orca (Linux)
Keyboard-only navigation — Unplug mouse, Tab through entire flowScreen reader walkthrough — Complete primary user journey with VoiceOver/NVDAZoom to 200% — Verify no content is lost or overlapping320px viewport — Verify content reflows without horizontal scrollColor blindness simulation — Use Sim Daltonism or built-in browser toolsMotion sensitivity — Enable prefers-reduced-motion and verify animations respect itText spacing override — Apply WCAG text spacing bookmarkletHigh contrast mode — Test in Windows High Contrast Mode