react-a11y-audit

Identify accessibility violations in React components across ARIA, keyboard, contrast, and screen reader checks.

1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/cr330326/AgentSkill --skill react-a11y-audit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-a11y-audit
Source: https://github.com/cr330326/AgentSkill/tree/main/validate/skill-generator-workspace/iteration-1/eval-6-react-a11y/with_skill/react-a11y-audit
Command: npx skills add https://github.com/cr330326/AgentSkill --skill react-a11y-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures React components meet WCAG 2.1 AA by highlighting violations in ARIA attributes, keyboard navigation, color contrast, and screen reader compatibility, and by providing actionable fixes.

Core Features & Use Cases

  • Four-dimension accessibility checks covering ARIA correctness, keyboard operability, color contrast, and screen reader readiness.
  • Generates precise before/after code guidance and remediation steps for each finding.
  • Suitable for component libraries, UI patterns, and application pages, and can be integrated into development workflows and CI.

Quick Start

Run an accessibility audit on your React codebase by pointing the auditor at your src directory.

Frequently Asked Questions about react-a11y-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate accessibility audits for my React components?

Automate React accessibility audits by scanning your src directory to identify ARIA violations, keyboard navigation issues, color contrast failures, and screen reader incompatibilities, generating actionable code fixes for each finding.

What is the best way to check WCAG 2.1 AA compliance in a React codebase?

Check WCAG 2.1 AA compliance in React by running an audit across four dimensions: ARIA correctness, keyboard operability, color contrast, and screen reader readiness, providing precise before/after code remediation guidance.

Can I integrate automated accessibility checks into my React CI workflow?

You can integrate automated accessibility checks into React CI workflows by applying the auditor to component libraries, UI patterns, and application pages to catch ARIA and keyboard violations during development.

How do I find and fix ARIA attribute violations in React UI patterns?

Find and fix ARIA attribute violations in React UI patterns by auditing components to detect incorrect attributes and receive clear remediation steps with actionable code corrections for each issue.

Does this React accessibility auditor detect keyboard navigation and color contrast issues?

The React accessibility auditor detects keyboard navigation operability and color contrast failures alongside ARIA correctness and screen reader compatibility, covering four dimensions to ensure components meet WCAG 2.1 AA standards.

What are the limitations of automated React accessibility checks for screen reader compatibility?

Automated React accessibility checks identify screen reader compatibility violations and ARIA errors but may miss contextual semantic issues, requiring manual testing to fully validate WCAG 2.1 AA operability for complex UI patterns.