Scan a frontend project for WCAG 2.2 accessibility violations and fix them. Usage: /a11y-audit [path]
复制下面这句话,粘贴给 Claude Code、Codex、Cursor 等 AI 编程工具,它会读取安装说明并在你确认后完成安装。
请阅读 https://ai.atlankj.com/install/asset/gh-claude-skills-233f141d0c48 ,按照其中的说明把「a11y-audit」安装到你(当前 AI 工具)中。执行前先告诉我将运行的命令和写入的位置,等我确认。
查看 AI 将读取的安装说明正在读取 GitHub 原文…
内容来自 GitHub 原始文件,由原作者维护。在 GitHub 查看
Scan a frontend project for WCAG 2.2 accessibility issues, show fixes, and optionally check color contrast.
/a11y-audit # Scan current project
/a11y-audit ./src # Scan specific directory
/a11y-audit ./src --fix # Scan and auto-fix what's possible
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
For each finding (starting with critical):
engineering-team/a11y-audit/skills/a11y-audit/references/framework-a11y-patterns.mdAuto-fixable issues (apply without asking):
alt="" on decorative imageslang attribute on <html>tabindex values > 0 → set to 0type="button" on non-submit buttons:focus-visible stylesIssues requiring user input (show fix, ask to apply):
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.
Generate a markdown report at a11y-report.md:
engineering-team/a11y-audit/skills/a11y-audit/SKILL.mdengineering-team/a11y-audit/skills/a11y-audit/scripts/a11y_scanner.pyengineering-team/a11y-audit/skills/a11y-audit/scripts/contrast_checker.pyengineering-team/a11y-audit/skills/a11y-audit/references/wcag-quick-ref.mdengineering-team/a11y-audit/skills/a11y-audit/references/aria-patterns.mdengineering-team/a11y-audit/skills/a11y-audit/references/framework-a11y-patterns.md