name: testing-strategy
description: Accessibility testing decision trees, browser/AT compatibility matrices, manual vs. automated test coverage, regression testing patterns, and acceptance criteria templates for user stories.
Testing Strategy Skill
Decision frameworks for accessibility testing — when to use automated tools vs. manual testing, which screen reader + browser combinations to test, and how to write accessibility acceptance criteria.
Automated vs. Manual Testing Coverage
| What Automated Tools Catch (~30-40%) |
What Requires Manual Testing (~60-70%) |
| Missing alt text on images |
Alt text quality and accuracy |
| Missing form labels |
Label clarity and helpfulness |
| Color contrast ratios (computed) |
Color contrast in context (gradients, images) |
| Missing lang attribute |
Correct language identification |
| Duplicate IDs |
Logical reading order |
| Missing ARIA roles on custom widgets |
Correct ARIA role for the interaction pattern |
| Heading hierarchy violations |
Heading text meaningfulness |
| Empty links and buttons |
Link/button text descriptiveness |
| Missing table headers |
Table caption and header association quality |
| Syntax errors in ARIA |
Screen reader announcement correctness |
Browser + Screen Reader Compatibility Matrix
Primary Test Combinations (Required)
| Screen Reader |
Browser |
OS |
Priority |
| NVDA |
Firefox |
Windows |
Must test |
| NVDA |
Chrome |
Windows |
Must test |
| JAWS |
Chrome |
Windows |
Must test |
| VoiceOver |
Safari |
macOS |
Must test |
| VoiceOver |
Safari |
iOS |
Must test |
| TalkBack |
Chrome |
Android |
Should test |
Secondary (Nice to Have)
| Screen Reader |
Browser |
OS |
| Narrator |
Edge |
Windows |
| JAWS |
Edge |
Windows |
Testing Decision Tree
Is it a new component or page?
├── Yes → Full test coverage (automated + manual)
│ ├── Run axe-core / Lighthouse scan
│ ├── Keyboard-only navigation test
│ ├── Screen reader announcement test (NVDA + VoiceOver minimum)
│ └── Visual check at 200% zoom
└── No → What changed?
├── Colors/styling → Contrast check + visual review
├── Interactive behavior → Keyboard + screen reader test
├── Content/text → Screen reader announcement check
├── Layout/order → Reading order + focus order test
└── Dependencies updated → Regression scan (axe-core)
Regression Testing Patterns
CI Pipeline Accessibility Gates
- axe-core scan: Run on every PR. Fail on new critical/serious violations.
- Baseline management: Store known issues in
.a11y-baseline.json. Only fail on new issues.
- Lighthouse score threshold: Set minimum accessibility score (e.g., 90). Fail on regression.
- Visual regression: Capture screenshots at 200% zoom. Compare for focus indicator and layout changes.
Preventing Regressions
- Add accessibility assertions to existing component tests (see
testing-accessibility.instructions.md)
- Include keyboard navigation in E2E test suites
- Track accessibility score trends over time (not just pass/fail)
Acceptance Criteria Template
For User Stories
Given [context],
When [action by keyboard/mouse/screen reader],
Then [accessible outcome]:
- [ ] Component has an accessible name (via label, aria-label, or aria-labelledby)
- [ ] Component has the correct ARIA role
- [ ] Component is reachable and operable by keyboard (Tab, Enter, Space, Escape, Arrows as appropriate)
- [ ] Focus is visible when the component receives focus
- [ ] State changes are announced to screen readers (aria-expanded, aria-selected, aria-checked, etc.)
- [ ] Error messages are associated with their inputs (aria-describedby or aria-errormessage)
- [ ] Content is readable at 200% zoom without horizontal scrolling
- [ ] Color is not the only means of conveying information
Common Testing Tools
| Tool |
Type |
Best For |
| axe-core / @axe-core/cli |
Automated |
CI/CD integration, broad violation scan |
| Lighthouse |
Automated |
Performance + accessibility combined score |
| WAVE |
Semi-automated |
Visual overlay of accessibility features/issues |
| Accessibility Insights |
Semi-automated |
FastPass (automated) + Assessment (guided manual) |
| pa11y |
Automated |
CI/CD, HTML CodeSniffer rules |
| jest-axe |
Unit test |
Component-level axe scans in jest |
| cypress-axe |
E2E test |
Page-level axe scans in Cypress |
| playwright + @axe-core/playwright |
E2E test |
Page-level axe scans in Playwright |
Screen Reader Testing Quick Reference
NVDA (Windows)
| Key |
Action |
| Insert + Space |
Toggle focus/browse mode |
| Tab |
Move to next focusable element |
| H |
Next heading |
| D |
Next landmark |
| F |
Next form field |
| T |
Next table |
| Insert + F7 |
Elements list (links, headings, landmarks) |
VoiceOver (macOS)
| Key |
Action |
| VO (Ctrl+Option) + Right |
Move to next element |
| VO + Space |
Activate current element |
| VO + U |
Open rotor (navigate by type) |
| VO + Cmd + H |
Next heading |
1---2name: testing-strategy-23description: ---4---5---6name: testing-strategy7description: Accessibility testing decision trees, browser/AT compatibility matrices, manual vs. automated test coverage, regression testing patterns, and acceptance criteria templates for user stories.8---9<!-- CANONICAL SOURCE: .github/skills/testing-strategy/SKILL.md -- Edit the canonical source; sync to Gemini via scripts/check-gemini-sync.ps1 -->1011# Testing Strategy Skill1213Decision frameworks for accessibility testing — when to use automated tools vs. manual testing, which screen reader + browser combinations to test, and how to write accessibility acceptance criteria.1415---1617## Automated vs. Manual Testing Coverage1819| What Automated Tools Catch (~30-40%) | What Requires Manual Testing (~60-70%) |20|--------------------------------------|---------------------------------------|21| Missing alt text on images | Alt text quality and accuracy |22| Missing form labels | Label clarity and helpfulness |23| Color contrast ratios (computed) | Color contrast in context (gradients, images) |24| Missing lang attribute | Correct language identification |25| Duplicate IDs | Logical reading order |26| Missing ARIA roles on custom widgets | Correct ARIA role for the interaction pattern |27| Heading hierarchy violations | Heading text meaningfulness |28| Empty links and buttons | Link/button text descriptiveness |29| Missing table headers | Table caption and header association quality |30| Syntax errors in ARIA | Screen reader announcement correctness |3132## Browser + Screen Reader Compatibility Matrix3334### Primary Test Combinations (Required)3536| Screen Reader | Browser | OS | Priority |37|--------------|---------|-----|----------|38| NVDA | Firefox | Windows | Must test |39| NVDA | Chrome | Windows | Must test |40| JAWS | Chrome | Windows | Must test |41| VoiceOver | Safari | macOS | Must test |42| VoiceOver | Safari | iOS | Must test |43| TalkBack | Chrome | Android | Should test |4445### Secondary (Nice to Have)4647| Screen Reader | Browser | OS |48|--------------|---------|-----|49| Narrator | Edge | Windows |50| JAWS | Edge | Windows |5152## Testing Decision Tree5354```text55Is it a new component or page?56├── Yes → Full test coverage (automated + manual)57│ ├── Run axe-core / Lighthouse scan58│ ├── Keyboard-only navigation test59│ ├── Screen reader announcement test (NVDA + VoiceOver minimum)60│ └── Visual check at 200% zoom61└── No → What changed?62 ├── Colors/styling → Contrast check + visual review63 ├── Interactive behavior → Keyboard + screen reader test64 ├── Content/text → Screen reader announcement check65 ├── Layout/order → Reading order + focus order test66 └── Dependencies updated → Regression scan (axe-core)67```6869## Regression Testing Patterns7071### CI Pipeline Accessibility Gates72731. **axe-core scan**: Run on every PR. Fail on new critical/serious violations.742. **Baseline management**: Store known issues in `.a11y-baseline.json`. Only fail on **new** issues.753. **Lighthouse score threshold**: Set minimum accessibility score (e.g., 90). Fail on regression.764. **Visual regression**: Capture screenshots at 200% zoom. Compare for focus indicator and layout changes.7778### Preventing Regressions7980- Add accessibility assertions to existing component tests (see `testing-accessibility.instructions.md`)81- Include keyboard navigation in E2E test suites82- Track accessibility score trends over time (not just pass/fail)8384## Acceptance Criteria Template8586### For User Stories8788```text89Given [context],90When [action by keyboard/mouse/screen reader],91Then [accessible outcome]:9293- [ ] Component has an accessible name (via label, aria-label, or aria-labelledby)94- [ ] Component has the correct ARIA role95- [ ] Component is reachable and operable by keyboard (Tab, Enter, Space, Escape, Arrows as appropriate)96- [ ] Focus is visible when the component receives focus97- [ ] State changes are announced to screen readers (aria-expanded, aria-selected, aria-checked, etc.)98- [ ] Error messages are associated with their inputs (aria-describedby or aria-errormessage)99- [ ] Content is readable at 200% zoom without horizontal scrolling100- [ ] Color is not the only means of conveying information101```102103## Common Testing Tools104105| Tool | Type | Best For |106|------|------|----------|107| axe-core / @axe-core/cli | Automated | CI/CD integration, broad violation scan |108| Lighthouse | Automated | Performance + accessibility combined score |109| WAVE | Semi-automated | Visual overlay of accessibility features/issues |110| Accessibility Insights | Semi-automated | FastPass (automated) + Assessment (guided manual) |111| pa11y | Automated | CI/CD, HTML CodeSniffer rules |112| jest-axe | Unit test | Component-level axe scans in jest |113| cypress-axe | E2E test | Page-level axe scans in Cypress |114| playwright + @axe-core/playwright | E2E test | Page-level axe scans in Playwright |115116## Screen Reader Testing Quick Reference117118### NVDA (Windows)119120| Key | Action |121|-----|--------|122| Insert + Space | Toggle focus/browse mode |123| Tab | Move to next focusable element |124| H | Next heading |125| D | Next landmark |126| F | Next form field |127| T | Next table |128| Insert + F7 | Elements list (links, headings, landmarks) |129130### VoiceOver (macOS)131132| Key | Action |133|-----|--------|134| VO (Ctrl+Option) + Right | Move to next element |135| VO + Space | Activate current element |136| VO + U | Open rotor (navigate by type) |137| VO + Cmd + H | Next heading |