Stats
Actions
Available In
Tags
Plugin
wcag-auditor
WCAG 2.2 AA/AAA accessibility auditing, ARIA roles audit, color contrast detection, screen reader compatibility, and automated fix suggestions for frontend codebases.
What's Inside
README
[!WARNING] This repo is deprecated. It has been merged into petro-nazarenko/claude-skills — a mega-bundle with 55+ checks across WCAG 2.2 and React Native.
New install command:
/plugin marketplace add petro-nazarenko/claude-skills /plugin install wcag-auditor@claude-skillsThis repo remains functional but will not receive updates. Please migrate.
wcag-auditor
WCAG 2.2 accessibility auditor for Claude Code. Covers AA/AAA compliance checks, ARIA roles audit, color contrast detection, screen reader compatibility, and automated fix suggestions for frontend codebases.
Install
# 1. Add to your Claude Code plugins
claude plugin add https://github.com/petro-nazarenko/wcag-auditor
# 2. Use it in any project
claude "audit my React app for WCAG AA compliance"
Capabilities
1. WCAG 2.2 AA/AAA Compliance Checks
Full coverage of all WCAG 2.2 criteria relevant to code — from 1.1.1 Non-text Content to 4.1.3 Status Messages. Includes the two new WCAG 2.2 criteria: 2.5.8 Target Size Minimum (24×24px) and 2.4.11 Focus Appearance.
"Check my components against WCAG 2.2 AA criteria"
"What WCAG criteria does this button component fail?"
"Does my form meet WCAG 2.2 requirements?"
2. ARIA Roles Audit
Validates ARIA landmark roles, widget roles, required properties, and common anti-patterns. Covers React, Vue, and Angular patterns.
"Is my ARIA usage correct on this custom dropdown?"
"What ARIA attributes does my dialog need?"
"I'm using role=button on a div — what else do I need?"
3. Color Contrast Detection
Calculates contrast ratios, identifies failing Tailwind classes, audits CSS custom properties, and provides fixed color values.
"Check if #767676 on white passes WCAG AA"
"Which of my Tailwind text colors fail contrast requirements?"
"Fix the contrast issues in my design tokens"
4. Screen Reader Compatibility
Covers ARIA live regions, focus management, skip links, table accessibility, form patterns, and framework-specific implementations (react-aria, focus traps).
"Make my modal dialog work with screen readers"
"How do I announce dynamic content updates?"
"Add proper skip links to my layout"
5. Keyboard Navigation
Audits tab order, focus visibility, keyboard traps, and interactive element patterns. Finds onClick-on-div issues.
"Audit my navigation component for keyboard accessibility"
"Find all elements that should be keyboard accessible but aren't"
"My users can't tab through the checkout form correctly"
6. Automated Fix Suggestions
Before/after code examples for every common violation type. Covers 12 fix patterns including modals, tab panels, infinite scroll, and toast notifications.
"Generate fixes for all Critical issues in my codebase"
"How do I convert my icon buttons to be screen reader accessible?"
"Fix the focus trap in my modal component"
Quick Reference: Common Violations
| Issue | WCAG | Severity | Fix |
|---|---|---|---|
<img> without alt | 1.1.1 | Critical | Add descriptive alt or alt="" for decorative |
<div onClick> without keyboard | 2.1.1 | Critical | Convert to <button> or add role + onKeyDown |
| Icon button without label | 4.1.2 | High | Add aria-label="Action name" |
| Input without label | 1.3.1 | High | Add <label htmlFor> or aria-label |
| Color-only error | 1.4.1 | High | Add icon + text description |
| Text contrast below 4.5:1 | 1.4.3 | High | Darken color (e.g. gray-400 → gray-600) |
outline: none without replacement | 2.4.7 | High | Add :focus-visible outline |
| Modal without focus trap | 2.1.2 | Critical | Implement focus trap + Escape handler |
Missing lang attribute | 3.1.1 | High | Add lang="en" to <html> |
| Placeholder as only label | 3.3.2 | High | Add visible <label> |
| Target < 24×24px | 2.5.8 | Medium | Set min-width/height: 24px |
Toast without aria-live | 4.1.3 | High | Add role="status" + aria-live="polite" |
Trigger Phrases
This skill activates automatically when you mention:
accessibility, a11y, WCAG, ARIA, screen reader, color contrast, tab order, ADA compliance, keyboard navigation, focus management, alt text, semantic HTML
License
MIT — Petro Nazarenko
Stats
Version1.0.0
Stars0
MaintenanceGood
LicenseMIT
Last Commit
Added
Safety Signals
Caution
Uses power tools
Uses Bash, Write, or Edit tools
Tags
