Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
alirezarezvani avatar

A11y Audit

  • 787 installs
  • 23.5k repo stars
  • Updated July 17, 2026
  • alirezarezvani/claude-skills

a11y-audit is a Claude Code skill that scans React and web components for accessibility violations and reports fixable issues for developers who need pre-production WCAG checks without manual browser audits.

About

a11y-audit is a Claude Code skill from alirezarezvani/claude-skills that automatically detects and reports accessibility violations in React and web components before they reach production. The skill analyzes JSX patterns such as missing image alt attributes, click handlers on non-interactive div elements, placeholder-only inputs without labels, and low-contrast interactive text in components like UserCard and SearchBar. Developers invoke a11y-audit during pull request review, UI refactors, or compliance prep when they need agent-guided feedback on semantic HTML and keyboard navigation without configuring axe-core or Lighthouse in CI first. The skill produces structured violation reports tied to specific components and DOM elements so engineers can patch source files directly. a11y-audit complements automated CI accessibility scanners by giving conversational, context-aware review inside the coding agent workflow rather than replacing dedicated browser-based audit tools.

  • Scans React components for missing alt text, ARIA labels, keyboard navigation, and color contrast issues
  • Provides specific remediation suggestions with code examples for each violation
  • Includes contrast ratio calculations with AA/AAA pass/fail status
  • Works directly on component files or live DOM snapshots
  • Delivers severity-bucketed report (critical, serious, moderate, minor)

A11y Audit by the numbers

  • 787 all-time installs (skills.sh)
  • +19 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #176 of 1,356 Code Review & Quality skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/alirezarezvani/claude-skills --skill a11y-audit

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs787
repo stars23.5k
Security audit3 / 3 scanners passed
Last updatedJuly 17, 2026
Repositoryalirezarezvani/claude-skills

How do you audit React components for accessibility violations?

Automatically detect and report accessibility violations in React and web components before they reach production.

Who is it for?

Frontend engineers shipping React UI who want agent-guided WCAG checks during code review without standing up a separate audit pipeline.

Skip if: Teams that already enforce axe-core or Lighthouse accessibility gates in CI and only need pass-or-fail automation without conversational review.

When should I use this skill?

A developer asks to check, audit, or fix accessibility issues in React or web components before production.

What you get

Structured accessibility violation report with component-level findings and remediation guidance

  • accessibility violation report
  • component-level remediation notes

Files

SKILL.mdMarkdownGitHub ↗

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:

1. Scans your codebase for every WCAG 2.2 Level A and AA violation, categorized by severity (Critical, Major, Minor) 2. Fixes each violation with framework-specific before/after code patterns 3. Verifies that fixes resolve the original violations and introduces no regressions 4. Reports findings in a structured format suitable for developers, PMs, and compliance stakeholders 5. Integrates into CI/CD pipelines to prevent accessibility regressions

Features

FeatureDescription
Full WCAG 2.2 ScanChecks all Level A and AA success criteria across your codebase
Framework DetectionAuto-detects React, Next.js, Vue, Angular, Svelte, or plain HTML
Severity ClassificationCategorizes each violation as Critical, Major, or Minor
Fix Code GenerationProduces before/after code diffs for every issue
Color Contrast CheckerValidates foreground/background pairs against AA and AAA ratios
Compliance ReportingGenerates stakeholder reports with pass/fail summaries
CI/CD IntegrationGitHub Actions, GitLab CI, Azure DevOps pipeline configs
Keyboard Navigation AuditDetects missing focus management and tab order issues
ARIA ValidationChecks for incorrect, redundant, or missing ARIA attributes

Severity Definitions

SeverityDefinitionExampleSLA
CriticalBlocks access for entire user groupsMissing alt text, no keyboard access to navigationFix before release
MajorSignificant barrier that degrades experienceInsufficient color contrast, missing form labelsFix within current sprint
MinorUsability issue that causes frictionRedundant ARIA roles, suboptimal heading hierarchyFix 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>
  );
}
#WCAGSeverityIssue
11.1.1Critical<img> missing alt attribute
22.1.1Critical<div onClick> not keyboard accessible
31.4.3MajorColor #aaa on white fails contrast (2.32:1, needs 4.5:1)
41.4.3MajorColor #999 on white fails contrast (2.85:1, needs 4.5:1)
54.1.2MajorInteractive 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

PitfallCorrect Approach
role="button" on a <div>Use native <button> -- includes keyboard handling for free
tabindex="0" on everythingOnly interactive elements need focus; use native elements
aria-label on non-interactive elementsUse aria-labelledby pointing to visible text
display: none for screen reader hidingUse .sr-only class instead
Color alone to convey meaningAdd icons, text labels, or patterns alongside color
Placeholder as only labelAlways provide a visible <label>
outline: none without replacementAlways provide a visible focus indicator via focus-visible
Empty alt="" on informational imagesInformational images need descriptive alt text
Skipping heading levels (h1 -> h3)Heading levels must be sequential
onClick without onKeyDownAdd keyboard support or prefer native elements
Ignoring prefers-reduced-motionWrap animations in @media (prefers-reduced-motion: no-preference)

Related Skills

SkillRelationship
senior-frontendFrontend patterns used in a11y fixes
code-reviewerInclude a11y checks in code review workflows
senior-qaIntegration of a11y testing into QA processes
playwright-proAutomated browser testing with accessibility assertions
epic-designWCAG 2.1 AA compliant animations and scroll storytelling
tdd-guideTest-driven development patterns for a11y test cases

Reference Documentation

ReferenceDescription
wcag-quick-ref.mdWCAG 2.2 Level A & AA criteria quick reference
wcag-22-new-criteria.mdNew WCAG 2.2 success criteria (Focus Appearance, Target Size, etc.)
aria-patterns.mdARIA patterns, keyboard interaction, and live regions
framework-a11y-patterns.mdFramework-specific fix patterns (React, Vue, Angular, Svelte, HTML)
color-contrast-guide.mdColor contrast checker details, Tailwind palette mapping, sr-only class
ci-cd-integration.mdGitHub Actions, GitLab CI, Azure DevOps, pre-commit hook configs
audit-report-template.mdStakeholder-ready audit report template
testing-checklist.mdManual testing checklist (keyboard, screen reader, visual, forms)
examples-by-framework.mdFull audit examples for Vue, Angular, Next.js, and Svelte

Resources

Related skills

How it compares

Pick a11y-audit for conversational, component-level accessibility review inside the agent; use axe-core or Lighthouse when you need automated pass-fail gates in CI pipelines.

FAQ

What does a11y-audit check in React components?

a11y-audit checks React and web components for common accessibility violations including missing image alt attributes, click handlers on non-interactive div elements, unlabeled form inputs, and insufficient contrast on interactive controls. Reports tie each finding to a specific

When should developers run a11y-audit?

Developers should run a11y-audit before merging UI changes or shipping to production, especially after refactoring legacy markup or adding new interactive components. The skill fits pre-release QA alongside linting rather than replacing dedicated CI scanners.

Is A11y Audit safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Code Review & Qualityfrontendtesting

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.