claude-skills/commands/a11y-audit.md
Claude 894fd23334
feat(agents,commands): trigger descriptions + gated workflow upgrades
- 17 root agents gained 'Use when...' trigger descriptions (<=1024 chars);
  cs-product-analyst placeholder body rewritten around real tools
- 21 commands had invalid YAML frontmatter fixed (unquoted inner colons);
  14 commands gained argument-hint; 6 duplicate commands marked with
  canonical-copy sync comments
- /prd: forcing questions + refuse-to-draft gate + required-sections checklist
- /sprint-plan: capacity math + carry-over check + definition-of-ready gate
- /tdd: rebuilt around the real tdd-guide assets with smoke-tested snippets
- cs-senior-engineer repointed from retired release-manager to
  changelog-generator

https://claude.ai/code/session_019AJddAL1NADWMXsy1qNPQF
2026-06-11 03:58:42 +00:00

2.5 KiB

name description argument-hint
a11y-audit Scan a frontend project for WCAG 2.2 accessibility violations and fix them. Usage: /a11y-audit [path] [path]

/a11y-audit

Scan a frontend project for WCAG 2.2 accessibility issues, show fixes, and optionally check color contrast.

Usage

/a11y-audit                     # Scan current project
/a11y-audit ./src               # Scan specific directory
/a11y-audit ./src --fix         # Scan and auto-fix what's possible

What It Does

Step 1: Scan

Run the a11y scanner on the target directory:

python3 {skill_path}/scripts/a11y_scanner.py {path} --json

Parse the JSON output. Group findings by severity (critical → serious → moderate → minor).

Display a summary:

A11y Audit: ./src
  Critical: 3 | Serious: 7 | Moderate: 12 | Minor: 5
  Files scanned: 42 | Files with issues: 15

Step 2: Fix

For each finding (starting with critical):

  1. Read the affected file
  2. Show the violation with context (before)
  3. Apply the fix from engineering-team/a11y-audit/skills/a11y-audit/references/framework-a11y-patterns.md
  4. Show the result (after)

Auto-fixable issues (apply without asking):

  • Missing alt="" on decorative images
  • Missing lang attribute on <html>
  • tabindex values > 0 → set to 0
  • Missing type="button" on non-submit buttons
  • Outline removal without replacement → add :focus-visible styles

Issues requiring user input (show fix, ask to apply):

  • Missing alt text (need description from user)
  • Missing form labels (need label text)
  • Heading restructuring (may affect layout)
  • ARIA role changes (may affect functionality)

Step 3: Contrast Check

If CSS files are present, run the contrast checker:

python3 {skill_path}/scripts/contrast_checker.py --batch {path}

For each failing color pair, suggest accessible alternatives.

Step 4: Report

Generate a markdown report at a11y-report.md:

  • Executive summary (pass/fail, issue counts)
  • Per-file findings with before/after diffs
  • Remaining manual review items
  • WCAG criteria coverage

Skill Reference

  • engineering-team/a11y-audit/skills/a11y-audit/SKILL.md
  • engineering-team/a11y-audit/skills/a11y-audit/scripts/a11y_scanner.py
  • engineering-team/a11y-audit/skills/a11y-audit/scripts/contrast_checker.py
  • engineering-team/a11y-audit/skills/a11y-audit/references/wcag-quick-ref.md
  • engineering-team/a11y-audit/skills/a11y-audit/references/aria-patterns.md
  • engineering-team/a11y-audit/skills/a11y-audit/references/framework-a11y-patterns.md