1ba7b77e34
SKILL.md was 1,374 lines / 41KB — the largest in the repo, 2.7x above the 500-line Anthropic limit. Split into focused reference files. Trimmed: 1,374 → 211 lines (9.6KB) New reference files (6): - ci-cd-integration.md (GitHub Actions, GitLab CI, Azure DevOps, pre-commit) - audit-report-template.md (stakeholder report template) - testing-checklist.md (keyboard, screen reader, visual, forms) - color-contrast-guide.md (contrast checker, Tailwind palette, sr-only) - examples-by-framework.md (Vue, Angular, Next.js, Svelte examples) - wcag-22-new-criteria.md (WCAG 2.2 new success criteria) Appended to existing: - framework-a11y-patterns.md (fix patterns catalog added) Untouched: aria-patterns.md, wcag-quick-ref.md No content deleted — everything moved to references. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
42 lines
1.7 KiB
Markdown
42 lines
1.7 KiB
Markdown
# Accessibility Testing Checklist
|
|
|
|
Use this checklist after applying fixes to verify accessibility manually.
|
|
|
|
## Keyboard Navigation
|
|
- [ ] All interactive elements reachable via Tab key
|
|
- [ ] Tab order follows visual/logical reading order
|
|
- [ ] Focus indicator visible on every focusable element (2px+ outline)
|
|
- [ ] Modals trap focus and return focus on close
|
|
- [ ] Escape key closes modals, dropdowns, and popups
|
|
- [ ] Arrow keys navigate within composite widgets (tabs, menus, listboxes)
|
|
- [ ] No keyboard traps (user can always Tab away)
|
|
|
|
## Screen Reader
|
|
- [ ] All images have appropriate alt text (or `alt=""` for decorative)
|
|
- [ ] Headings create logical document outline (h1 -> h2 -> h3)
|
|
- [ ] Form inputs have associated labels
|
|
- [ ] Error messages announced via `aria-live` or `role="alert"`
|
|
- [ ] Page title updates on navigation (SPA)
|
|
- [ ] Dynamic content changes announced appropriately
|
|
|
|
## Visual
|
|
- [ ] Text contrast meets 4.5:1 for normal text, 3:1 for large text
|
|
- [ ] UI component contrast meets 3:1 against background
|
|
- [ ] Content reflows without horizontal scrolling at 320px width
|
|
- [ ] Text resizable to 200% without loss of content
|
|
- [ ] No information conveyed by color alone
|
|
- [ ] Focus indicators meet 2.4.11 Focus Appearance criteria
|
|
|
|
## Motion and Media
|
|
- [ ] Animations respect `prefers-reduced-motion`
|
|
- [ ] No auto-playing media with audio
|
|
- [ ] No content flashing more than 3 times per second
|
|
- [ ] Video has captions; audio has transcripts
|
|
|
|
## Forms
|
|
- [ ] All inputs have visible labels
|
|
- [ ] Required fields indicated (not by color alone)
|
|
- [ ] Error messages specific and associated with input via `aria-describedby`
|
|
- [ ] Autocomplete attributes present on common fields (name, email, etc.)
|
|
- [ ] No CAPTCHA without alternative method (WCAG 2.2 3.3.8)
|