# Wcag Compliance > Use this skill when verifying WCAG 2.1/3.0 compliance, mapping accessibility violations to specific criteria, or providing remediation guidance with code examples - Skill: `tan-yong-sheng-ai-vision-mcp/wcag-compliance` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add tan-yong-sheng-ai-vision-mcp/wcag-compliance` - Raw SKILL.md: https://api.skillmd.com/api/skills/tan-yong-sheng-ai-vision-mcp/wcag-compliance/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tan-yong-sheng (https://skillmd.com/u/tan-yong-sheng-ai-vision-mcp) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/tan-yong-sheng-ai-vision-mcp/wcag-compliance --- # WCAG Compliance Deep accessibility compliance guidance for WCAG 2.1 (compliance-focused) and WCAG 3.0 (outcome-focused) standards. ## When to Use Use this skill when: - Auditing for WCAG 2.1 or WCAG 3.0 compliance - Mapping findings to specific WCAG criteria - Providing remediation guidance with code examples - Testing accessibility fixes - Explaining user impact and accommodation needs ## Reference Materials This skill includes comprehensive reference documentation: - **[wcag-2.2-complete-criteria.md](references/wcag-2.2-complete-criteria.md)** — All 78 WCAG 2.2 success criteria organized by level (A, AA, AAA) with common issues and remediation guidance - **[wcag-3.0-outcomes-framework.md](references/wcag-3.0-outcomes-framework.md)** — Outcome-focused accessibility framework, paradigm shift from WCAG 2.1, audit workflow, and remediation patterns - **[aria-patterns-reference.md](references/aria-patterns-reference.md)** — 13 essential ARIA patterns with code examples, keyboard support, and screen reader behavior - **[A11Y-PATTERNS.md](references/A11Y-PATTERNS.md)** — Copy-paste-ready accessibility code patterns (modal focus trap, skip link, error handling, form labels, dragging movements, tabs, live regions, screen reader commands) ## WCAG 2.1 vs WCAG 3.0: Paradigm Shift **WCAG 2.1 (Compliance-Focused)**: Binary pass/fail against specific technical criteria. Levels: A (minimum), AA (standard), AAA (enhanced). **WCAG 3.0 (Outcome-Focused)**: Outcome-centered goals focusing on user ability. Four dimensions: Perceivable, Operable, Understandable, Robust. **See** → [wcag-3.0-outcomes-framework.md](references/wcag-3.0-outcomes-framework.md) for detailed comparison, paradigm differences, and outcome-focused audit workflow. --- ## Quick Start: 3-Phase Accessibility Workflow ### Phase 1: Scan & Analyze 1. Run automated tools (axe, WAVE, Lighthouse, Pa11y) 2. Conduct keyboard navigation and screen reader testing 3. Map findings to WCAG criteria 4. Prioritize: Critical (blocks) > High > Medium > Low ### Phase 2: Remediate For each finding: 1. Map to WCAG criterion (e.g., "1.4.3 Contrast Level AA") 2. Provide code fix with before/after 3. Explain user impact (which disabilities affected) 4. Suggest testing steps ### Phase 3: Verify 1. Test keyboard navigation (Tab, Shift+Tab, Enter, Space) 2. Test with screen readers (NVDA, JAWS, VoiceOver) 3. Verify contrast ratios (4.5:1 normal, 3:1 large, 3:1 UI elements) 4. Test at 200% zoom 5. Validate semantic HTML and ARIA patterns **See** → [wcag-2.2-complete-criteria.md](references/wcag-2.2-complete-criteria.md) for all 78 WCAG 2.2 criteria with common issues and severity mapping. --- ## Code Patterns & ARIA For accessible code implementations, refer to: - **[aria-patterns-reference.md](references/aria-patterns-reference.md)** — 13 patterns: buttons, forms, tabs, modals, menus, live regions with full code and keyboard support - **[A11Y-PATTERNS.md](references/A11Y-PATTERNS.md)** — Copy-paste patterns: modal focus trap, skip links, error handling, form labels, ARIA tabs --- ## Testing Tools & Assistive Technologies ### Automated Testing - axe DevTools (browser extension, good for CI) - WAVE (visual feedback on page) - Lighthouse (Chrome DevTools) - Pa11y (CLI, scriptable) ### Manual Testing & Screen Readers - **Keyboard**: Tab, Shift+Tab, Enter, Space, Arrow keys - **NVDA** (Windows): Insert+Down (read), Tab (navigate), Insert+H (help) - **JAWS** (Windows): Insert+Down (read), Insert+Z (browse/forms mode) - **VoiceOver** (Mac): Cmd+F5 (start), VO+Right/Left (navigate) - **Voice Control**: "Click [element]", "Press [button]", "Show numbers" - **Contrast**: WebAIM Contrast Checker, Color Oracle (color blindness) --- ## Best Practices ### Prioritization Matrix - **Critical**: Blocks task completion (form won't submit, can't navigate) - **High**: Significantly impacts UX (button not keyboard accessible, no focus indicator) - **Medium**: Noticeable but workaround exists (low contrast on secondary text, missing alt on decorative image) - **Low**: Polish/refinement (improved ARIA labeling, consistency improvements) ### WCAG Levels - **Level A**: Minimum (rarely sufficient for public products) - **Level AA**: Industry standard (target for most products) — 4.5:1 contrast, keyboard accessible, semantic HTML - **Level AAA**: Enhanced (specialized/high-stakes) — 7:1 contrast, extensive testing with AT and real users ### Common Pitfalls - Relying only on automated tools (~30% of issues missed) - Fixing only critical issues (medium issues compound) - Testing with one screen reader only (behavior varies) - Forgetting keyboard-only users (not all AT uses screen readers) - Assuming contrast is sufficient (also need semantic meaning) - Not testing with real users with disabilities --- ## Assessment Framework For WCAG 3.0 outcome-focused approach: 1. **User Outcome at Risk**: What can the user NOT do? 2. **Disability Impact**: How are specific disabilities affected? 3. **Remediation**: What change restores the outcome? 4. **Verification**: How do we verify outcome is achieved? **See** → [wcag-3.0-outcomes-framework.md](references/wcag-3.0-outcomes-framework.md) for assessment template and outcome-focused remediation patterns. --- ## External Resources - [WCAG 2.2 W3C Spec](https://www.w3.org/TR/WCAG22/) - [WCAG 3.0 Draft](https://www.w3.org/TR/wcag-3.0/) - [WebAIM Tools](https://webaim.org/) - [W3C ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)