init

.opencode/skills/web-testing/references/accessibility-testing.md

@@ -0,0 +1,84 @@
+# 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/