Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
Back to list

Accessibility Audit (WCAG 2.2)

Scans React, Next.js, Vue, Angular, Svelte, or plain HTML code for WCAG 2.2 Level A/AA violations and delivers fix code plus compliance reports.

Dev & CodingIntermediate26,2603,699AI score 8/10Last updated: Aug 30, 2026

What it does

  • Auto-detects your framework and walks the source tree to flag every WCAG 2.2 Level A and AA violation.
  • Classifies findings as Critical / Major / Minor with suggested remediation SLAs.
  • Generates framework-specific before/after fix code for issues like missing alt, non-keyboard div onClick, low contrast, and misused ARIA.
  • Checks color contrast against AA/AAA, audits keyboard navigation and focus handling, and validates ARIA attributes.
  • Ships a stakeholder report template plus CI/CD configs for GitHub Actions, GitLab CI, Azure DevOps, and pre-commit hooks.

Who it's for

  • Frontend developers preparing for accessibility or legal compliance reviews (public sector, fintech, e-commerce).
  • Design-system and UI engineers cleaning up color palettes for contrast compliance.
  • Team leads and QA engineers who want an a11y gate in code review or CI to prevent regressions.

Example uses

  1. "Audit the src/ directory against WCAG 2.2 AA" → get a violation table with severity classification.
  2. "Does #777777 text on white pass AA? Suggest an accessible alternative" → get the contrast ratio and compliant color options.
  3. "Fix the accessibility issues in this ProductCard component" → get patched code with alt text, a real link/button, and passing colors.
  4. "Set up GitHub Actions to fail PRs with Critical violations" → get a ready CI workflow.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/alirezarezvani/claude-skills/HEAD/.gemini/skills/a11y-audit/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the .gemini/skills/a11y-audit folder from the GitHub repo alirezarezvani/claude-skills into my ~/.claude/skills/a11y-audit/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/alirezarezvani/claude-skills.git /tmp/claude-skills && mkdir -p ~/.claude/skills && cp -r /tmp/claude-skills/.gemini/skills/a11y-audit ~/.claude/skills/

This is a third-party skill. Check the source repository before installing.

  1. Open your terminal.
  2. Clone the repo: git clone https://github.com/alirezarezvani/claude-skills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill in: cp -r claude-skills/.gemini/skills/a11y-audit ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/a11y-audit that SKILL.md plus the scripts/ and references/ folders came along (if missing, look for a fuller copy elsewhere in the repo).
  6. Make sure Python 3 is available for the scanner scripts: python3 --version
  7. Restart Claude Code and ask something like "Run a WCAG 2.2 AA accessibility audit on this project."