Setup Claudette

Get your repository WCAG compliant in minutes. Claudette is an accessibility auditor skill for Claude Code that automatically checks and fixes your web applications to meet WCAG 2.1/2.2 standards.

Installation

npm install

Commands

/claudette

Run a full accessibility audit on your codebase.

            /claudette
            # Audit all supported files
          

            /claudette src/**/*.jsx
            # Audit specific files
          

            /claudette --level AAA
            # Check AAA compliance
          

/claudette-fix

Auto-fix common accessibility issues.

            /claudette-fix
            # Fix all files
          

            /claudette-fix --dry-run
            # Preview changes
          

            /claudette-fix --interactive
            # Confirm each fix
          

/contrast-check

Validate color contrast ratios.

            /contrast-check
            # Check all CSS files
          

            /contrast-check --fg #333 --bg #fff
            # Check specific colors
          

Supported File Types

HTML .html, .htm
JSX/TSX .jsx, .tsx
Vue .vue
Svelte .svelte
CSS .css

Features

WCAG 2.1/2.2 Compliance - Comprehensive rule-based auditing
Auto-fixes - Automatically fix missing alt text, labels, and more
Color Contrast - Ensure text meets WCAG contrast requirements
Focus/Keyboard - Detect focus order and tabindex issues
ARIA & Semantic HTML - Get recommendations for better accessibility

Auto-Fix Capabilities

The /claudette-fix command can automatically fix:

Missing alt attributes
Missing form labels
Skipped heading levels
Missing lang attribute
Unlabeled buttons

Run Tests

npm test