wcag-audit-patterns

Audit web content against WCAG 2.2 criteria and map violations to code remediation.

1|Updated Jul 20, 2026
One-click install
npx skills add https://github.com/gonzoblasco/ai-developer-stack --skill wcag-audit-patterns-gonzoblasco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wcag-audit-patterns
Source: https://github.com/gonzoblasco/ai-developer-stack/tree/main/frontend-ui/wcag-audit-patterns
Command: npx skills add https://github.com/gonzoblasco/ai-developer-stack --skill wcag-audit-patterns-gonzoblasco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web accessibility violations are hard to detect and fix systematically: automated scanners catch only 30-40% of issues, and teams struggle to map findings to specific WCAG 2.2 criteria for ADA, Section 508, or VPAT compliance. ## Core Features & Use Cases - Combined Audit Workflow: Runs automated scans (axe, Lighthouse, WAVE) followed by mandatory manual keyboard and screen reader verification (VoiceOver/NVDA). - WCAG 2.2 Criterion Mapping: Maps each finding to a specific criterion (contrast 1.4.3, keyboard 2.1.1, focus visible 2.4.7, target size 2.5.8, status messages 4.1.3) with severity levels (Critical, Major, Minor). - Actionable Remediation: Provides concrete code fixes such as semantic HTML, alt text rules, aria-live regions, and 24x24px minimum touch targets. - Use Case: Before a product launch, audit your React app for keyboard traps and contrast failures, document each violation with its WCAG criterion, apply the suggested fixes, and re-test to confirm compliance. ## Quick Start Audit this page for WCAG 2.2 violations, map each issue to its criterion with severity, and propose code fixes.

Frequently Asked Questions about wcag-audit-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit a website for WCAG 2.2 compliance?▼

Run automated scans with axe, Lighthouse, or WAVE to collect initial findings, then manually verify keyboard navigation, focus visibility, and screen reader behavior. Map each issue to a WCAG 2.2 criterion, assign severity, apply code fixes, and re-test.

What accessibility issues do automated scanners miss?▼

Automated tools detect only about 30-40% of accessibility problems. They miss keyboard focus traps, illogical tab order, missing focus indicators, and screen reader announcement issues, which require manual testing with Tab navigation and VoiceOver or NVDA.

What contrast ratio does WCAG 2.2 require for text?▼

WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text under criterion 1.4.3. Interactive components and graphical elements must meet at least 3:1 under criterion 1.4.11.

What is the minimum touch target size in WCAG 2.2?▼

WCAG 2.2 criterion 2.5.8 requires pointer targets to be at least 24x24 CSS pixels or have sufficient spacing from adjacent targets. A size of 44x44px is preferred for primary controls.

Can this skill provide legal accessibility certification?▼

No. It supports technical auditing and remediation toward ADA, Section 508, and VPAT compliance, but it does not provide legal advice or formal certification. Consult legal professionals for compliance determinations.