SKILL.md
Accessibility Audit Skill
Comprehensive WCAG 2.2 Level AA accessibility auditing for React/TypeScript applications with MUI framework awareness.
Quick Reference
| Severity |
Impact |
Examples |
| Critical |
Blocks access completely |
Keyboard traps, missing alt on actions, no focus visible |
| High |
Significantly degrades UX |
Poor contrast on CTAs, no skip navigation, small touch targets |
| Medium |
Minor usability impact |
Missing autocomplete, unclear link text |
| Low |
Best practice enhancement |
Could add tooltips, more descriptive titles |
Key Principle
Severity = Impact x Likelihood, NOT WCAG conformance level.
A Level A failure can be LOW severity; a Level AA failure can be CRITICAL.
Required Tooling
# Install required tools
npm install --save-dev eslint-plugin-jsx-a11y jest-axe @axe-core/playwright
# Configure ESLint
# Add to .eslintrc: extends: ['plugin:jsx-a11y/recommended']
Workflow
| Phase |
Description |
| 1. Setup |
Install tooling, create output directories |
| 2. Static Analysis |
ESLint jsx-a11y scan |
| 3. Runtime Analysis |
jest-axe and Playwright |
| 4. Manual Validation |
Keyboard, screen reader, contrast |
| 5. Report Generation |
JSON + Markdown outputs |
Phase 1: Setup
See [workflow/setup.md](workflow/setup.md) for installation and configuration.
Phase 4: Manual Validation
See [workflow/manual-validation.md](workflow/manual-validation.md) for keyboard and screen reader testing.
Reference
- [Severity Rubric](reference/severity-rubric.md) - Impact x Likelihood calculation
- [MUI Framework Awareness](reference/mui-awareness.md) - Built-in accessibility features
Common False Positives to Avoid
| Component |
Built-in Behavior |
Don't Flag |
MUI <SvgIcon> |
Auto aria-hidden="true" |
Icons without titleAccess |
MUI <Alert> |
Default role="alert" |
Missing role attribute |
MUI <Button> |
36.5px min height |
Target size < 44px |
MUI <TextField> |
Auto label association |
Missing label |
MUI <Autocomplete> |
Manages ARIA attrs |
Missing aria-expanded |
Quick Audit Command
Run accessibility audit on [component/page] following WCAG 2.2 AA standards
Related Skills
codebase-auditor - General code quality analysis
bulletproof-react-auditor - React architecture review