claude-skills-reference/commands/a11y-audit.md at c1cf2fcc893bd5991c04e89e57052ea7a625c8eb

firefrost-gaming/claude-skills-reference

Files

Alireza Rezvani a059113c96 Dev (#377 )

* fix: add missing plugin.json files and restore trailing newlines

- Add plugin.json for review-fix-a11y skill
- Add plugin.json for free-llm-api skill
- Restore POSIX-compliant trailing newlines in JSON index files

* feat(engineering): add review-fix-a11y skill (WCAG 2.2 a11y audit + fix) (#375)

Adds review-fix-a11y (WCAG 2.2 a11y audit + fix) and free-llm-api skills.

Includes:
- review-fix-a11y: WCAG 2.2 audit workflow, a11y_audit.py scanner, contrast_checker.py
- free-llm-api: ChatAnywhere, Groq, Cerebras, OpenRouter, llm-mux, One API setup
- secret_scanner.py upgrade with secrets-patterns-db integration (1,600+ patterns)

Co-authored-by: ivanopenclaw223-alt <ivanopenclaw223-alt@users.noreply.github.com>

* chore: sync codex skills symlinks [automated]

* Revert "feat(engineering): add review-fix-a11y skill (WCAG 2.2 a11y audit + fix) (#375)"

This reverts commit 49c9f2109f.

* chore: sync codex skills symlinks [automated]

* Revert "feat(engineering): add review-fix-a11y skill (WCAG 2.2 a11y audit + fix) (#375)"

This reverts commit 49c9f2109f.

* feat(engineering-team): add a11y-audit skill — WCAG 2.2 accessibility audit & fix (#376)

Built from scratch (replaces reverted PR #375 contribution).

Skill package:
- SKILL.md: 1132 lines, 3-phase workflow (scan → fix → verify),
  per-framework fix patterns (React, Next.js, Vue, Angular, Svelte, HTML),
  CI/CD integration guide, 20+ issue type coverage
- scripts/a11y_scanner.py: static scanner detecting 20+ violation types
  across HTML/JSX/TSX/Vue/Svelte/CSS — severity-ranked, CI-friendly exit codes
- scripts/contrast_checker.py: WCAG contrast calculator with AA/AAA checks,
  --suggest mode, --batch CSS scanning, named color support
- references/wcag-quick-ref.md: WCAG 2.2 Level A/AA criteria table
- references/aria-patterns.md: ARIA roles, live regions, keyboard interaction
- references/framework-a11y-patterns.md: React, Vue, Angular, Svelte fix patterns
- assets/sample-component.tsx: sample file with intentional violations
- expected_outputs/: scan report, contrast output, JSON output samples
- /a11y-audit slash command, settings.json, plugin.json, README.md

Validation: 97.6/100 (EXCELLENT), quality 73.9/100 (B-), scripts 2/2 PASS

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: sync codex skills symlinks [automated]

---------

Co-authored-by: Leo <leo@openclaw.ai>
Co-authored-by: ivanopenclaw223-alt <ivanopenclaw223@gmail.com>
Co-authored-by: ivanopenclaw223-alt <ivanopenclaw223-alt@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-18 08:42:53 +01:00

2.4 KiB

Raw Blame History

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

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):

Read the affected file
Show the violation with context (before)
Apply the fix from references/framework-a11y-patterns.md
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/SKILL.md
engineering-team/a11y-audit/scripts/a11y_scanner.py
engineering-team/a11y-audit/scripts/contrast_checker.py
engineering-team/a11y-audit/references/wcag-quick-ref.md
engineering-team/a11y-audit/references/aria-patterns.md
engineering-team/a11y-audit/references/framework-a11y-patterns.md

2.4 KiB Raw Blame History

/a11y-audit