85 lines
1.9 KiB
Markdown
85 lines
1.9 KiB
Markdown
# Accessibility Testing (a11y)
|
|
|
|
## WCAG 2.1 AA Checklist
|
|
|
|
### Perceivable
|
|
- [ ] Images have meaningful alt text
|
|
- [ ] Color not sole conveyance method
|
|
- [ ] Contrast ratio 4.5:1 (text)
|
|
- [ ] Text resizable to 200%
|
|
|
|
### Operable
|
|
- [ ] All functions keyboard accessible
|
|
- [ ] Visible focus indicators
|
|
- [ ] Skip navigation links
|
|
- [ ] No keyboard traps
|
|
|
|
### Understandable
|
|
- [ ] Language attribute set
|
|
- [ ] Labels for form inputs
|
|
- [ ] Error messages clear
|
|
|
|
### Robust
|
|
- [ ] Valid HTML
|
|
- [ ] ARIA landmarks correct
|
|
|
|
## Playwright + axe-core
|
|
|
|
```typescript
|
|
import { test, expect } from '@playwright/test';
|
|
import AxeBuilder from '@axe-core/playwright';
|
|
|
|
test('page is accessible', async ({ page }) => {
|
|
await page.goto('http://localhost:3000');
|
|
const results = await new AxeBuilder({ page }).analyze();
|
|
expect(results.violations).toEqual([]);
|
|
});
|
|
|
|
test('WCAG AA compliant', async ({ page }) => {
|
|
await page.goto('http://localhost:3000');
|
|
const results = await new AxeBuilder({ page })
|
|
.withTags(['wcag2aa'])
|
|
.analyze();
|
|
expect(results.violations).toEqual([]);
|
|
});
|
|
```
|
|
|
|
## Component Testing (Jest)
|
|
|
|
```typescript
|
|
import { axe, toHaveNoViolations } from 'jest-axe';
|
|
expect.extend(toHaveNoViolations);
|
|
|
|
test('Button accessible', async () => {
|
|
const { container } = render(<Button>Click</Button>);
|
|
expect(await axe(container)).toHaveNoViolations();
|
|
});
|
|
```
|
|
|
|
## Manual Testing
|
|
|
|
- [ ] Tab through all interactive elements
|
|
- [ ] Shift+Tab navigates backward
|
|
- [ ] Enter/Space activates buttons
|
|
- [ ] Escape closes modals
|
|
- [ ] Screen reader announces content
|
|
|
|
## CLI Tools
|
|
|
|
```bash
|
|
npx @axe-core/cli https://example.com
|
|
npx lighthouse https://example.com --only-categories=accessibility
|
|
npx pa11y https://example.com
|
|
```
|
|
|
|
## CI Integration
|
|
|
|
```yaml
|
|
- name: Accessibility Tests
|
|
run: npx playwright test --grep @a11y
|
|
```
|
|
|
|
## Resources
|
|
- axe rules: https://dequeuniversity.com/rules/axe/
|
|
- WCAG checklist: https://www.a11yproject.com/checklist/
|