Skip to content
AI & Agents
Command

/a11y-audit

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

From plugin
alirezarezvani-claude-skills
26k150 skills116 agents150 commands2 MCP
Install
$ npx -y skills add alirezarezvani/claude-skills --agent claude-code

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/a11y-audit

Context preview

What this command does when you run it.

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

Command definition

a11y-audit.md
name: a11y-audit
description: "Scan a frontend project for WCAG 2.2 accessibility violations and fix them. Usage: /a11y-audit [path]"
argument-hint: "[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`
Read more
Ships withalirezarezvani-claude-skills

388 production-ready Claude Code skills, plugins, and agent skills for 13 AI coding tools. The most comprehensive open-source library of Claude Code skills and agent plugins — also works with OpenAI Codex, Gemini CLI, Cursor, and 9 more coding agents.

Get the whole plugin

Other commands on alirezarezvani-claude-skills.