A11y audit

--- name: "a11y-audit" description: "An accessibility auditskill s for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React,Next.js , Vue, Angular, Svelte, and plain HTML codebases. Use it when auditing accessibility, fixing accessibility violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines." --- # Accessibility Audit WCAG 2.2 Accessibility Audit and Remediation Skill ## Description The a11y-auditskill provides a complete accessibility audit pipeline for modern web applications. It implements a three-phaseworkflow :Scan, Fix, Verify:that identifies WCAG 2.2 Level A and AA violations, generates exact fix code for each framework, and produces stakeholder-ready compliance reports. For every violation it finds, it provides the precise before/after code fix tailored to your framework (React,Next.js , Vue, Angular, Svelte, or plain HTML). What thisskill does: 1. Scans your codebase for every WCAG 2.2 Level A and AA violation, categorized by severity (Critical, Major, Minor) 2. Fixes each violation with framework-specific before/after code patterns 3. Verifies that the fixes resolve the original violations and do not introduce any regressions 4. Reports findings in a structured format suitable for developers, project managers, and compliance stakeholders 5. Integrates into CI/CD pipelines to prevent accessibility regressions ## Features | Feature | Description | |---------|-------------| | Full WCAG 2.2 Scan | Checks all Level A and AA success criteria across your codebase | | Framework Detection | Automatically detects React,Next.js , Vue, Angular, Svelte, or plain HTML | | Severity Classification | Categorizes each violation as Critical, Major, or Minor | | Fix Code Generation | Generates before/after code diffs for every issue | | Color Contrast Checker | Validates foreground/background color pairs against AA and AAA ratios | | Compliance Reporting | Generates stakeholder reports with pass/fail summaries | | CI/CD Integration |GitHub Actions, GitLab CI, AzureDevOps pipeline configurations | | Keyboard Navigation Audit | Detects missing focus management and tab order issues | | ARIA Validation | Checks for incorrect, redundant, or missing ARIA attributes | ### Severity Definitions | Severity | Definition | Example | SLA | |----------|-----------|---------|-----| | Critical | Blocks access for entire user groups | Missing alt text, no keyboard access to navigation | Fix before release | | Major | Significant barrier that degrades the user experience | Insufficient color contrast, missing form labels | Fix within the current sprint | | Minor | Usability issue that causes friction | Redundant ARIA roles, suboptimal heading hierarchy | Fix within the next 2 sprints | ## Usage ### Quick Start ``bash # Scan entire project python scripts/a11y_scanner.py /path/to/project # Scan with JSON output for tooling python scripts/a11y_scanner.py /path/to/project --json # Check color contrast for specific values python scripts/contrast_checker.py --fg "#777777" --bg "#ffffff" # Check contrast across a CSS/Tailwind file python scripts/contrast_checker.py --file /path/to/styles.css ` ### Slash Command ` /a11y-audit # Audit current project /a11y-audit --scope src/ # Audit specific directory /a11y-audit --fix # Audit and auto-apply fixes /a11y-audit --report # Generate stakeholder report /a11y-audit --ci # Output CI-compatible results ` ### Three-Phase Workflow **Phase 1: Scan** -- Walk the source tree, detect framework, apply rule set. `bash python scripts/a11y_scanner.py /path/to/project --format table ` **Phase 2: Fix** -- Apply framework-specific fixes for each violation. > See [references/framework-a11y-patterns.md](references/framework-a11y-patterns.md) for the complete fix patterns catalog. **Phase 3: Verify** -- Re-run the scanner to confirm fixes and check for regressions. `bash python scripts/a11y_scanner.py /path/to/project --baseline audit-baseline.json ` ## Example: React Component Audit ``tsx // BEFORE: src/components/ProductCard.tsx fun