Reviews HTML/CSS and React/TypeScript code for WCAG 2.2 Level AA accessibility compliance. Use when the user asks to review code for accessibility, check WCAG compliance, identify accessibility issues, or audit components/pages for a11y standards. Applicable for code reviews, component development, and accessibility testing.
npx claudepluginhub shawn-sandy/agentics --plugin wcag-compliance-reviewerThis skill uses the workspace's default tool permissions.
Review code changes for WCAG 2.2 Level AA accessibility compliance in HTML/CSS and React/TypeScript components. This skill identifies violations, provides specific fixes, and recommends automated testing approaches. Also covers all WCAG 2.1 and 2.0 criteria.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
Review code changes for WCAG 2.2 Level AA accessibility compliance in HTML/CSS and React/TypeScript components. This skill identifies violations, provides specific fixes, and recommends automated testing approaches. Also covers all WCAG 2.1 and 2.0 criteria.
Follow these steps exactly when reviewing code for accessibility.
Default: Use WCAG 2.2 AA from static reference (references/wcag-aa-guidelines.md)
Fetch from W3C website if:
Use WCAG 2.1 instead if:
Example user phrases that trigger web fetch:
Read the code and identify:
Based on the code type and complexity, load the appropriate reference files:
WCAG Guidelines Source:
Choose one of these approaches based on user request:
Option A: Use static reference (default, faster)
references/wcag-aa-guidelines.md - Complete WCAG 2.2 AA success criteria (includes all 2.1 criteria)Option B: Fetch from official W3C website
Use when user:
Fetch using web_fetch:
WCAG 2.2 AA Quick Reference:
https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2&levels=a,aa
Understanding WCAG 2.2:
https://www.w3.org/WAI/WCAG22/Understanding/
WCAG 2.1 AA Quick Reference (older version):
https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1&levels=a,aa
Understanding WCAG 2.1:
https://www.w3.org/WAI/WCAG21/Understanding/
After fetching, combine official guidelines with code examples from references/common-violations.md
Always load when reviewing code:
references/common-violations.md - Code examples and fixes for HTML/CSS/React/TypeScriptreferences/testing-guide.md - When user asks about testing or wants to set up automated checksReview code against the four WCAG principles in this order:
A. Perceivable (Priority: High)
B. Operable (Priority: High)
C. Understandable (Priority: Medium)
D. Robust (Priority: Medium)
Errors (Must Fix):
Warnings (Should Fix):
Recommendations (Best Practices):
For each issue identified:
common-violations.mdExample format:
❌ Issue: Missing alt text (WCAG 1.1.1 - Level A)
Line 23:
<img src="logo.png">
✅ Fix:
<img src="logo.png" alt="Company Name Logo">
Why: Screen readers announce "logo.png" without alt text, which is not meaningful. The alt text provides the image's purpose.
Based on the code complexity, recommend appropriate testing tools from references/testing-guide.md:
For all reviews, recommend:
For component libraries or complex UIs, additionally recommend:
For full applications, additionally recommend:
Structure the review output as follows:
# Accessibility Review Summary
## Issues Found: X errors, Y warnings
### Critical Issues (Errors)
[List each error with line number, rule, and fix]
### Warnings
[List each warning with line number, rule, and fix]
### Recommendations
[List best practice improvements]
## Testing Recommendations
[Specific tools and approaches for this codebase]
## Quick Wins
[Easy fixes that provide significant accessibility improvements]
Use this for rapid reviews:
Images & Media:
Forms:
Keyboard & Focus:
Color & Contrast:
Structure & Semantics:
ARIA:
Dynamic Content:
WCAG 2.2 New Criteria:
// ✅ Good - TypeScript
<button onClick={handleDelete} aria-label="Delete item">
<TrashIcon aria-hidden="true" />
</button>
// ✅ Good - Focus trap and restoration
<div
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<h2 id="modal-title">Modal Title</h2>
<button onClick={onClose}>Close</button>
{children}
</div>
// ✅ Good - Associated error, proper ARIA
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
aria-invalid={!!error}
aria-describedby={error ? "email-error" : undefined}
/>
{error && (
<div id="email-error" role="alert">
{error}
</div>
)}
For initial scanning of files, use the provided Python script:
python scripts/check_wcag.py path/to/component.tsx
This performs static analysis to catch common issues like:
Note: The script catches ~30% of issues. Always perform comprehensive manual review using the full checklist above.
check_wcag.py - Automated accessibility checker for HTML/CSS/React/TypeScript fileswcag-aa-guidelines.md - Complete WCAG 2.2 Level AA success criteria organized by principlecommon-violations.md - Common accessibility violations with before/after code examples for HTML/CSS and React/TypeScripttesting-guide.md - Automated testing tools, setup instructions, and manual testing checklists