wcag-compliance-reviewer

Identify WCAG 2.1 AA accessibility violations in HTML/CSS and React/TypeScript code.

Updated Jul 26, 2026
One-click install
npx skills add https://github.com/shawn-sandy/skills --skill wcag-compliance-reviewer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wcag-compliance-reviewer
Source: https://github.com/shawn-sandy/skills/tree/main/wcag-compliance-reviewer
Command: npx skills add https://github.com/shawn-sandy/skills --skill wcag-compliance-reviewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Manual accessibility reviews are time-consuming and prone to human error. This skill automates the process of checking code against WCAG 2.1 Level AA standards, ensuring your web applications are inclusive and compliant without the manual grind.

Core Features & Use Cases

  • Automated Code Review: Scans HTML/CSS and React/TypeScript for common WCAG violations.
  • Specific Fixes & Recommendations: Provides exact code fixes and suggests automated testing tools.
  • Use Case: A developer submits a pull request with new UI components. Use this skill to automatically review the code for accessibility issues, getting a detailed report with fixes before merging.

Quick Start

Review the attached index.html and styles.css files for WCAG 2.1 Level AA compliance.

Frequently Asked Questions about wcag-compliance-reviewer

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

FAQPage Schema
How do I check my HTML and React code for WCAG 2.1 accessibility violations?

WCAG 2.1 compliance checking automates detection of accessibility violations in HTML/CSS and React/TypeScript code. This skill scans your components and markup against Level AA standards, identifying issues like missing alt text, color contrast failures, and semantic HTML problems in a single pass.

Can I use automated accessibility testing in my code review process?

Yes. Automated accessibility testing integrates directly into code reviews by scanning pull requests for WCAG violations before merge. This skill categorizes issues by severity and provides specific code fixes, eliminating manual accessibility audits and catching violations early in development.

What accessibility issues does static analysis catch in React components?

Static analysis detects WCAG violations including missing ARIA labels, inaccessible form controls, insufficient color contrast, missing heading hierarchy, keyboard navigation gaps, and semantic HTML errors in React and TypeScript components without running the code.

How do I get actionable fixes for accessibility violations?

After scanning for WCAG violations, this skill generates specific code fixes tied to each issue and recommends automated testing tools to verify compliance. Fixes address the root cause—such as adding alt attributes or correcting heading structure—with implementation guidance.

Do I need manual accessibility testing if I use automated compliance review?

Automated compliance review catches many WCAG violations but cannot validate everything—manual testing with assistive technologies and expert review remains necessary for full accessibility assurance. Automation accelerates static checks; human review validates real-world usability.

What's the difference between automated compliance checking and accessibility audits?

Automated compliance checking performs fast, rule-based static analysis of code to flag WCAG violations. Full accessibility audits include manual testing, user testing, and expert review. Automation finds structural issues quickly; audits validate the complete user experience.