126 lines
3.6 KiB
Markdown
126 lines
3.6 KiB
Markdown
# Phase 4: Manual Validation
|
|
|
|
These checks CANNOT be automated and require human judgment.
|
|
|
|
## 1. Color Contrast Validation
|
|
|
|
**Tool**: [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
|
|
|
### Process
|
|
1. Extract all colors from theme configuration
|
|
2. Calculate contrast ratios for each text/background pair
|
|
3. Document results in gap report
|
|
|
|
### Requirements
|
|
| Element Type | Minimum Ratio |
|
|
|--------------|---------------|
|
|
| Normal text (< 18pt) | 4.5:1 |
|
|
| Large text (>= 18pt or 14pt bold) | 3:1 |
|
|
| UI components | 3:1 |
|
|
| Focus indicators | 3:1 |
|
|
|
|
### Severity by Element
|
|
- Primary CTA button low contrast = **CRITICAL**
|
|
- Body text low contrast = **HIGH**
|
|
- Footer link low contrast = **MEDIUM**
|
|
- Decorative text low contrast = **LOW**
|
|
|
|
## 2. Keyboard Navigation Testing
|
|
|
|
### Basic Test
|
|
1. Start at top of page
|
|
2. Press Tab repeatedly through all interactive elements
|
|
3. Verify:
|
|
- [ ] Logical order (left-to-right, top-to-bottom)
|
|
- [ ] No keyboard traps (can always Tab away)
|
|
- [ ] All functionality accessible
|
|
- [ ] Focus indicator visible on every element
|
|
|
|
### Key Combinations to Test
|
|
| Key | Expected Behavior |
|
|
|-----|-------------------|
|
|
| Tab | Move to next focusable element |
|
|
| Shift+Tab | Move to previous focusable element |
|
|
| Enter | Activate buttons/links |
|
|
| Space | Activate buttons, toggle checkboxes |
|
|
| Escape | Close modals/menus |
|
|
| Arrow keys | Navigate within components (menus, tabs) |
|
|
|
|
### Common Keyboard Traps
|
|
- Modal dialogs without Escape handling
|
|
- Date pickers without keyboard support
|
|
- Custom dropdowns that don't cycle
|
|
|
|
## 3. Screen Reader Testing
|
|
|
|
### Recommended Tools
|
|
- **Mac**: VoiceOver (built-in, Cmd+F5)
|
|
- **Windows**: NVDA (free), JAWS (paid)
|
|
- **iOS**: VoiceOver (built-in)
|
|
- **Android**: TalkBack (built-in)
|
|
|
|
### What to Test
|
|
1. **Landmarks**: Header, nav, main, footer announced
|
|
2. **Headings**: Logical hierarchy (h1 → h2 → h3)
|
|
3. **Forms**: Labels announced, errors read
|
|
4. **Dynamic content**: Status messages announced
|
|
5. **Images**: Alt text read appropriately
|
|
|
|
### VoiceOver Commands (Mac)
|
|
| Command | Action |
|
|
|---------|--------|
|
|
| VO + Right Arrow | Next element |
|
|
| VO + Left Arrow | Previous element |
|
|
| VO + U | Open rotor (landmarks, headings, links) |
|
|
| VO + Space | Activate |
|
|
|
|
## 4. Zoom and Reflow Testing
|
|
|
|
### 200% Zoom Test
|
|
1. Browser zoom to 200%
|
|
2. Verify:
|
|
- [ ] No horizontal scrolling
|
|
- [ ] No text truncation
|
|
- [ ] No overlapping elements
|
|
- [ ] All functionality accessible
|
|
|
|
### 320px Width Test (Mobile Reflow)
|
|
1. Resize browser to 320px width
|
|
2. Verify:
|
|
- [ ] Content reflows to single column
|
|
- [ ] No horizontal scroll
|
|
- [ ] Touch targets still accessible
|
|
- [ ] Text remains readable
|
|
|
|
## 5. WCAG Interpretation Decisions
|
|
|
|
Some criteria require human judgment:
|
|
|
|
### 2.4.5 Multiple Ways
|
|
- **Question**: Is this a "set of Web pages"?
|
|
- **If < 3 pages**: Likely exempt
|
|
- **If >= 3 pages**: Need 2+ navigation methods
|
|
|
|
### 3.2.6 Consistent Help
|
|
- **Question**: Does a help mechanism exist?
|
|
- **If no help exists**: Compliant (no requirement)
|
|
- **If help exists**: Must be consistently placed
|
|
|
|
### 1.3.5 Identify Input Purpose
|
|
- **Question**: Is this collecting user data from the 53 specified purposes?
|
|
- Search inputs: **NOT** in scope
|
|
- User email/phone: **IN** scope
|
|
|
|
## Checklist
|
|
|
|
- [ ] All color combinations checked against contrast requirements
|
|
- [ ] Full keyboard navigation test completed
|
|
- [ ] Screen reader testing with at least one tool
|
|
- [ ] 200% zoom test passed
|
|
- [ ] 320px reflow test passed
|
|
- [ ] Applicability decisions documented
|
|
|
|
## Next Step
|
|
|
|
Proceed with Report Generation (JSON + Markdown outputs).
|