mirror of
https://github.com/alirezarezvani/claude-skills.git
synced 2026-08-28 04:24:58 +00:00
82c5aea9f0
- Resolve conflicts: keep redesigned skills index, take dev's cs-aeo link fix, union of DOMAIN_SEO_CONTEXT entries in generate-docs.py - Regenerate catalog on the merged tree (dev's agent/command description updates, removed ai-seo/release-manager/command-guide, restructured universal-scraping-architect) - Update counters to post-merge truth from scripts/derive_counters.py: 345 skills, 78 plugins (14 bundles + 64 standalone), 570+ Python tools - Add redirects for upstream-removed pages (ai-seo -> aeo, release-manager -> changelog-generator, command-guide -> engineering index) - Add compliance-os bundle to bundle tables; rebuild 78-plugin table from marketplace.json - Teach the generator to rewrite repo-root-relative source links to GitHub URLs — mkdocs build --strict now passes with zero warnings https://claude.ai/code/session_015bYZ97nV4oRb3LbxCRFVcP
90 lines
2.9 KiB
Markdown
90 lines
2.9 KiB
Markdown
---
|
|
title: "/a11y-audit — Slash Command for AI Coding Agents"
|
|
description: "Scan a frontend project for WCAG 2.2 accessibility violations and fix them. Usage: /a11y-audit [path]. Slash command for Claude Code, Codex CLI, Gemini CLI."
|
|
---
|
|
|
|
# /a11y-audit
|
|
|
|
<div class="page-meta" markdown>
|
|
<span class="meta-badge">:material-console: Slash Command</span>
|
|
<span class="meta-badge">:material-github: <a href="https://github.com/alirezarezvani/claude-skills/tree/main/commands/a11y-audit.md">Source</a></span>
|
|
</div>
|
|
|
|
|
|
Scan a frontend project for WCAG 2.2 accessibility issues, show fixes, and optionally check color contrast.
|
|
|
|
## Usage
|
|
|
|
```bash
|
|
/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:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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`
|