accessibility-auditor

Review generated components for WCAG 2.2 compliance and produce prioritized accessibility reports.

7|Updated Mar 11, 2026
One-click install
npx skills add https://github.com/kaelig/react-craft --skill accessibility-auditor-kaelig
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-auditor
Source: https://github.com/kaelig/react-craft/tree/main/react-craft/skills/accessibility-auditor
Command: npx skills add https://github.com/kaelig/react-craft --skill accessibility-auditor-kaelig

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the process of reviewing generated components for accessibility compliance, identifying and prioritizing issues that could prevent users with disabilities from interacting with the product.

Core Features & Use Cases

  • Automated Testing: Leverages a multi-layered testing stack (eslint-plugin-jsx-a11y, axe-core, Playwright, etc.) to catch a wide range of accessibility violations.
  • Actionable Findings: Produces a detailed report (a11y-report.md) with prioritized findings and remediation guidance.
  • Use Case: After a new UI component is generated, this Skill runs automatically to ensure it meets WCAG 2.2 AA standards, flagging any contrast issues, keyboard traps, or missing ARIA attributes before deployment.

Quick Start

Run the accessibility auditor on the generated component files to produce an accessibility report.

Frequently Asked Questions about accessibility-auditor

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

FAQPage Schema
How do I check my React components for WCAG 2.2 compliance?

To check React components for WCAG 2.2 compliance, you can run an automated accessibility auditor that applies an 8-layer testing stack. This process evaluates your components and produces an actionable findings report prioritizing remediation for blockers and critical issues.

What does automated accessibility testing look for in a UI component?

Automated accessibility testing looks for WCAG 2.2 AA standard violations in UI components, such as contrast issues, keyboard traps, and missing ARIA attributes. It applies static analysis, dynamic testing with axe-core, and screen reader simulation to identify violations.

Can I use axe-core and Playwright to validate WCAG 2.2 AA standards?

Yes, you can use axe-core and Playwright to validate WCAG 2.2 AA standards. The accessibility auditor integrates these tools within an 8-layer testing stack to perform dynamic testing, browser-based checks, and screen reader simulation on generated components.

How do I generate an accessibility report with prioritized remediation steps?

You generate an accessibility report with prioritized remediation steps by running the accessibility auditor on your component files. It produces a detailed `a11y-report.md` file containing actionable findings and prioritizes remediation efforts for blockers and critical issues.

When do I need to run an accessibility audit on generated UI components?

You need to run an accessibility audit on generated UI components after a new component is generated and before deployment. This ensures the components meet WCAG 2.2 AA standards, automatically flagging contrast issues, keyboard traps, or missing ARIA attributes.