86 lines
2.7 KiB
Markdown
86 lines
2.7 KiB
Markdown
---
|
|
name: accessibility-audit
|
|
version: 0.1.0
|
|
description: WCAG 2.2 Level AA accessibility auditing with risk-based severity scoring
|
|
author: Connor
|
|
triggers:
|
|
- accessibility audit
|
|
- WCAG compliance
|
|
- a11y review
|
|
- screen reader
|
|
- keyboard navigation
|
|
- color contrast
|
|
---
|
|
|
|
# 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
|
|
|
|
```bash
|
|
# 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
|