Skip to content
Get packs

Accessibility Audit

Scan a web codebase for WCAG 2.2 A/AA accessibility issues and suggest fixes

Source Download skill
Repository
alirezarezvani/claude-skills
Stars
29,149
Licence
MIT
Files
15 files

What it does

Once installed, the agent can review a web project's source code (React, Next.js, Vue, Angular, Svelte or plain HTML) for accessibility problems such as missing image alt text, unlabeled form fields, poor colour contrast and keyboard-inaccessible controls, each mapped to a WCAG 2.2 criterion and severity level. It can also suggest framework-specific before/after code fixes, check colour pairs against contrast ratios, and draft a compliance-style report. The skill bundles Python scripts for scanning and contrast checking, plus reference guides on WCAG criteria and CI/CD integration.

Great for

  • Front-end developers who want a first-pass accessibility review of a component or project
  • Teams adding accessibility checks to GitHub Actions, GitLab CI or Azure DevOps pipelines
  • Product or compliance staff preparing a stakeholder summary of accessibility gaps

Skip it if

  • Final legal or compliance certification: a static code scan cannot cover everything WCAG requires, such as real screen reader behaviour or content meaning, so human testing is still needed
  • Projects where the agent should auto-edit code without review: the --fix option applies changes automatically, so changes should be checked in version control first

Try asking

  • “Audit my src/ folder for WCAG 2.2 AA violations and list them by severity”
  • “Check whether #777777 text on a white background passes AA contrast and suggest an accessible colour”
  • “Review this React ProductCard component for accessibility issues and show before/after fixes”
  • “Create a stakeholder-friendly accessibility report for our checkout flow”
Step-by-step guide: how to use Accessibility AuditInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    a11y-audit.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip a11y-audit.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip a11y-audit.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Start with a scan without --fix, review the findings, then apply fixes deliberately and re-run the scanner with --baseline to confirm no regressions
  • Pair the automated scan with manual keyboard and screen reader testing, since static checks miss many real-world issues
  • Use the contrast checker on your actual design tokens so colour fixes match your brand palette

What's inside

  • expected_outputs/sample-contrast-output.txt
  • expected_outputs/sample-scan-output.json
  • expected_outputs/sample-scan-report.md
  • references/aria-patterns.md
  • references/audit-report-template.md
  • references/ci-cd-integration.md
  • references/color-contrast-guide.md
  • references/examples-by-framework.md
  • references/framework-a11y-patterns.md
  • references/testing-checklist.md
  • references/wcag-22-new-criteria.md
  • references/wcag-quick-ref.md
  • scripts/a11y_scanner.py
  • scripts/contrast_checker.py
  • SKILL.md

Redistributed unmodified from alirezarezvani/claude-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.