a11y-audit
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.
- Installs
- 976
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/alirezarezvani/claude-skills --skill a11y-audit- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads a11y-audit automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Accessibility Audit
WCAG 2.2 Accessibility Audit and Remediation Skill
Description
The a11y-audit skill provides a complete accessibility audit pipeline for modern web applications. It implements a three-phase workflow -- Scan, Fix, Verify -- that identifies WCAG 2.2 Level A and AA violations, generates exact fix code per framework, and produces stakeholder-ready compliance reports.
For every violation it finds, it provides the precise before/after code fix tailored to your framework (React, Next.js, Vue, Angular, Svelte, or plain HTML).
What this skill does:
- Scans your codebase for every WCAG 2.2 Level A and AA violation, categorized by severity (Critical, Major, Minor)
- Fixes each violation with framework-specific before/after code patterns
- Verifies that fixes resolve the original violations and introduces no regressions
- Reports findings in a structured format suitable for developers, PMs, and compliance stakeholders
- Integrates into CI/CD pipelines to prevent accessibility regressions
Features
| Feature | Description |
|---|---|
| Full WCAG 2.2 Scan | Checks all Level A and AA success criteria across your codebase |
| Framework Detection | Auto-detects React, Next.js, Vue, Angular, Svelte, or plain HTML |
| Severity Classification | Categorizes each violation as Critical, Major, or Minor |
| Fix Code Generation | Produces before/after code diffs for every issue |
| Color Contrast Checker | Validates foreground/background pairs against AA and AAA ratios |
| Compliance Reporting | Generates stakeholder reports with pass/fail summaries |
| CI/CD Integration | GitHub Actions, GitLab CI, Azure DevOps pipeline configs |
| Keyboard Navigation Audit | Detects missing focus management and tab order issues |
| ARIA Validation | Checks for incorrect, redundant, or missing ARIA attributes |
Severity Definitions
| Severity | Definition | Example | SLA |
|---|---|---|---|
| Critical | Blocks access for entire user groups | Missing alt text, no keyboard access to navigation | Fix before release |
| Major | Significant barrier that degrades experience | Insufficient color contrast, missing form labels | Fix within current sprint |
| Minor | Usability issue that causes friction | Redundant ARIA roles, suboptimal heading hierarchy | Fix within next 2 sprints |
Usage
Quick Start
# Scan entire project
python scripts/a11y_scanner.py /path/to/project
# Scan with JSON output for tooling
python scripts/a11y_scanner.py /path/to/project --json
# Check color contrast for specific values
python scripts/contrast_checker.py --fg "#777777" --bg "#ffffff"
# Check contrast across a CSS/Tailwind file
python scripts/contrast_checker.py --file /path/to/styles.css
Slash Command
/a11y-audit # Audit current project
/a11y-audit --scope src/ # Audit specific directory
/a11y-audit --fix # Audit and auto-apply fixes
/a11y-audit --report # Generate stakeholder report
/a11y-audit --ci # Output CI-compatible results
Three-Phase Workflow
Phase 1: Scan -- Walk the source tree, detect framework, apply rule set.
python scripts/a11y_scanner.py /path/to/project --format table
Phase 2: Fix -- Apply framework-specific fixes for each violation.
See references/framework-a11y-patterns.md for the complete fix patterns catalog.
Phase 3: Verify -- Re-run the scanner to confirm fixes and check for regressions.
python scripts/a11y_scanner.py /path/to/project --baseline audit-baseline.json
Example: React Component Audit
// BEFORE: src/components/ProductCard.tsx
function ProductCard({ product }) {
return (
<div onClick={() => navigate(`/product/${product.id}`)}>
<img src={product.image} />
<div style={{ color: '#aaa', fontSize: '12px' }}>{product.name}</div>
<span style={{ color: '#999' }}>${product.price}</span>
</div>
);
}
| # | WCAG | Severity | Issue |
|---|---|---|---|
| 1 | 1.1.1 | Critical | <img> missing alt attribute |
| 2 | 2.1.1 | Critical | <div onClick> not keyboard accessible |
| 3 | 1.4.3 | Major | Color #aaa on white fails contrast (2.32:1, needs 4.5:1) |
| 4 | 1.4.3 | Major | Color #999 on white fails contrast (2.85:1, needs 4.5:1) |
| 5 | 4.1.2 | Major | Interactive element missing role and accessible name |
// AFTER: src/components/ProductCard.tsx
function ProductCard({ product }) {
return (
<a href={`/product/${product.id}`} className="product-card"
aria-label={`View ${product.name} - $${product.price}`}>
<img src={product.image} alt={product.imageAlt || product.name} />
<div style={{ color: '#595959', fontSize: '12px' }}>{product.name}</div>
<span style={{ color: '#767676' }}>${product.price}</span>
</a>
);
}
See references/examples-by-framework.md for Vue, Angular, Next.js, and Svelte examples.
Tools Reference
a11y_scanner.py
Usage: python scripts/a11y_scanner.py <path> [options]
Options:
--json Output results as JSON
--format {table,csv} Output format (default: table)
--severity {critical,major,minor} Filter by minimum severity
--framework {react,vue,angular,svelte,html,auto} Force framework (default: auto)
--baseline FILE Compare against previous scan results
--report Generate stakeholder report
--output FILE Write results to file
--quiet Suppress output, exit code only
--ci CI mode: non-zero exit on critical issues
contrast_checker.py
Usage: python scripts/contrast_checker.py [options]
Options:
--fg COLOR Foreground color (hex)
--bg COLOR Background color (hex)
--file FILE Scan CSS file for color pairs
--tailwind DIR Scan directory for Tailwind color classes
--json Output results as JSON
--suggest Suggest accessible alternatives for failures
--level {aa,aaa} Target conformance level (default: aa)
Common Pitfalls
| Pitfall | Correct Approach |
|---|---|
role="button" on a <div> | Use native <button> -- includes keyboard handling for free |
tabindex="0" on everything | Only interactive elements need focus; use native elements |
aria-label on non-interactive elements | Use aria-labelledby pointing to visible text |
display: none for screen reader hiding | Use .sr-only class instead |
| Color alone to convey meaning | Add icons, text labels, or patterns alongside color |
| Placeholder as only label | Always provide a visible <label> |
outline: none without replacement | Always provide a visible focus indicator via focus-visible |
Empty alt="" on informational images | Informational images need descriptive alt text |
| Skipping heading levels (h1 -> h3) | Heading levels must be sequential |
onClick without onKeyDown | Add keyboard support or prefer native elements |
Ignoring prefers-reduced-motion | Wrap animations in @media (prefers-reduced-motion: no-preference) |
Related Skills
| Skill | Relationship |
|---|---|
| senior-frontend | Frontend patterns used in a11y fixes |
| code-reviewer | Include a11y checks in code review workflows |
| senior-qa | Integration of a11y testing into QA processes |
| playwright-pro | Automated browser testing with accessibility assertions |
| epic-design | WCAG 2.1 AA compliant animations and scroll storytelling |
| tdd-guide | Test-driven development patterns for a11y test cases |
Reference Documentation
| Reference | Description |
|---|---|
| wcag-quick-ref.md | WCAG 2.2 Level A & AA criteria quick reference |
| wcag-22-new-criteria.md | New WCAG 2.2 success criteria (Focus Appearance, Target Size, etc.) |
| aria-patterns.md | ARIA patterns, keyboard interaction, and live regions |
| framework-a11y-patterns.md | Framework-specific fix patterns (React, Vue, Angular, Svelte, HTML) |
| color-contrast-guide.md | Color contrast checker details, Tailwind palette mapping, sr-only class |
| ci-cd-integration.md | GitHub Actions, GitLab CI, Azure DevOps, pre-commit hook configs |
| audit-report-template.md | Stakeholder-ready audit report template |
| testing-checklist.md | Manual testing checklist (keyboard, screen reader, visual, forms) |
| examples-by-framework.md | Full audit examples for Vue, Angular, Next.js, and Svelte |
Resources
FAQ
What does the a11y-audit skill do?
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.
How do I install a11y-audit?
Run npx skills add https://github.com/alirezarezvani/claude-skills --skill a11y-audit in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/a11y-audit/ (personal) or .claude/skills/a11y-audit/ (project).
Which AI agents can use a11y-audit?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is a11y-audit safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains a11y-audit?
It is published by alirezarezvani in alirezarezvani/claude-skills. It has 976 recorded installs.
More from alirezarezvani/claude-skills
engineering-skills
alirezarezvani/claude-skills
Index of the engineering-team skills bundle for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevOps, security, AI/ML, data engineering, Playwright, Stripe, AWS, MS365 (stdlib-only Python tools). Use when browsing or choosing among engineering-team role skills — load only the one specialist SKILL.md you need, never bulk-load the bundle.
finance-skills
alirezarezvani/claude-skills
Router/index for the finance skills bundled in this plugin: financial-analyst (ratio analysis, DCF valuation, budget variance, rolling forecasts), saas-metrics-coach (ARR/MRR, churn, CAC/LTV, NRR, quick ratio) and month-end-close (close calendar, reconciliations, flux review). Use when a finance request doesn't obviously match one skill and you need to pick the right one (e.g., 'analyze these financials', 'how healthy are my SaaS metrics').
marketing-skills
alirezarezvani/claude-skills
Directory and router for the marketing skills library. Use when you need to find the right marketing skill for a task, see what marketing capabilities exist, or get oriented in this plugin. 44 specialist skills across 8 pods (content, SEO + AEO, CRO, channels, growth, intelligence, sales enablement, ops), 59 stdlib Python tools. Routes to one skill — it does not execute marketing work itself.
business-growth-skills
alirezarezvani/claude-skills
Router/index for the 4 business & growth skills bundled in this plugin: customer-success-manager (health scoring, churn risk, expansion), sales-engineer (RFP analysis, competitive matrices, PoC planning), revenue-operations (pipeline, forecast accuracy, GTM efficiency), and contract-and-proposal-writer. Use when a growth/revenue request doesn't obviously match one skill and you need to pick the right one (e.g., 'which accounts are at risk', 'should we bid on this RFP').
engineering-advanced-skills
alirezarezvani/claude-skills
Index of 37 advanced engineering agent skills for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Use when browsing or choosing among the POWERFUL-tier engineering skills: agent design, RAG, MCP servers, CI/CD, database design, observability, security auditing, changelog/release automation, reliability (SLO/chaos/flags/operators), platform ops.
product-skills
alirezarezvani/claude-skills
Use when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery, roadmaps, spec-to-repo, landing pages, SaaS scaffolding) or the 4 standalone product-team plugins (user stories, Apple HIG, code-to-PRD, research summarizer). Triggers on 'help me prioritize', 'plan a product experiment', 'we ship features nobody uses', 'run the discovery loop', 'is our OST sound'. Forks context to route to one sub-skill via a deterministic signal router and returns a digest; can also drive a continuous-discovery loop (Torres cadence tracker + OST linter as machine gates) or a full goal→plan→execute→verify→close run through the repo-wide agent-harness. Distinct from project-management (how to deliver vs what to build), marketing/landing (from-scratch pages), and engineering/agent-harness (the generic loop engine this orchestrator plugs into).
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.