90 lines
1.7 KiB
Markdown
90 lines
1.7 KiB
Markdown
# Phase 1: Setup & Preparation
|
|
|
|
## Required Tooling Installation
|
|
|
|
### Static Analysis (Required)
|
|
```bash
|
|
npm install --save-dev eslint-plugin-jsx-a11y
|
|
```
|
|
|
|
Configure `.eslintrc.js`:
|
|
```javascript
|
|
module.exports = {
|
|
extends: ['plugin:jsx-a11y/recommended'],
|
|
// ... other config
|
|
};
|
|
```
|
|
|
|
### Runtime Analysis (Required)
|
|
```bash
|
|
npm install --save-dev jest-axe @axe-core/react
|
|
```
|
|
|
|
### E2E Analysis (Required)
|
|
```bash
|
|
npm install --save-dev @axe-core/playwright
|
|
```
|
|
|
|
### Optional Tools
|
|
```bash
|
|
npm install --save-dev @storybook/addon-a11y pa11y-ci
|
|
```
|
|
|
|
## Verification Commands
|
|
|
|
```bash
|
|
# Verify installations
|
|
npm list eslint-plugin-jsx-a11y jest-axe @axe-core/playwright
|
|
|
|
# Check ESLint config
|
|
grep -l "jsx-a11y" .eslintrc* 2>/dev/null || echo "jsx-a11y not configured"
|
|
```
|
|
|
|
## Output Directory Setup
|
|
|
|
```bash
|
|
mkdir -p docs/accessibility
|
|
```
|
|
|
|
## Prepare Report Templates
|
|
|
|
### Gap Report JSON Structure
|
|
```json
|
|
{
|
|
"meta": {
|
|
"project": "PROJECT_NAME",
|
|
"auditDate": "YYYY-MM-DD",
|
|
"auditor": "Claude Code",
|
|
"protocolVersion": "2.0.0",
|
|
"wcagVersion": "2.2",
|
|
"wcagLevel": "AA"
|
|
},
|
|
"summary": {
|
|
"totalCriteria": 60,
|
|
"passing": 0,
|
|
"failing": 0,
|
|
"notApplicable": 0,
|
|
"compliancePercentage": 0,
|
|
"severityBreakdown": {
|
|
"critical": 0,
|
|
"high": 0,
|
|
"medium": 0,
|
|
"low": 0
|
|
}
|
|
},
|
|
"findings": []
|
|
}
|
|
```
|
|
|
|
## Pre-Audit Checklist
|
|
|
|
- [ ] eslint-plugin-jsx-a11y installed and configured
|
|
- [ ] jest-axe available for component tests
|
|
- [ ] @axe-core/playwright available for E2E tests
|
|
- [ ] docs/accessibility/ directory exists
|
|
- [ ] Project uses React + TypeScript (protocol optimized for this stack)
|
|
|
|
## Next Step
|
|
|
|
Continue with Static Analysis (ESLint jsx-a11y scan).
|