Manual Accessibility Testing Checklist¶
Overview¶
This document provides comprehensive manual accessibility testing procedures to ensure WCAG 2.1 AA compliance before deployment. All tests must pass before merging to main branch.
Testing Schedule¶
- Required: Before every production deployment
- Recommended: During feature development
- Platforms: Desktop (Windows/Mac/Linux), Mobile (iOS/Android)
- Browsers: Chrome, Firefox, Safari, Edge
1. Keyboard Navigation Testing¶
Test Setup¶
- Tools Required: Keyboard only (no mouse)
- Test Duration: 15-20 minutes
- Passing Criteria: All interactive elements accessible and logical tab order
Test Procedure¶
1.1 Tab Navigation¶
- Press
Tabkey to navigate through all interactive elements - Verify tab order follows visual layout (left to right, top to bottom)
- Confirm all buttons, links, and form inputs are reachable
- Verify no keyboard traps (can always tab away from an element)
- Check that hidden/collapsed content is skipped in tab order
1.2 Focus Indicators¶
- Verify focus indicator visible on ALL interactive elements
- Confirm focus indicator has minimum 2px outline
- Check focus indicator color contrast meets 3:1 ratio
- Verify focus indicator not removed or hidden by CSS
- Test focus indicators on all button variants (primary, secondary, disabled)
1.3 Keyboard Shortcuts¶
-
Enterkey activates focused buttons and links -
Spacekey activates focused buttons -
Escapekey closes modals and dropdowns - Arrow keys work for navigation where applicable
- No conflicting keyboard shortcuts with browser/OS
1.4 Form Navigation¶
- Tab through all form fields in logical order
- Shift+Tab navigates backwards correctly
- Enter key submits forms when appropriate
- Required field validation works with keyboard only
- Error messages are keyboard accessible
Results:
Date Tested: __________
Tester: __________
Status: ☐ Pass ☐ Fail ☐ Needs Review
Issues Found: __________
2. Screen Reader Testing¶
Test Setup¶
- Windows: NVDA (free) or JAWS
- Mac: VoiceOver (built-in)
- Test Duration: 20-30 minutes
- Passing Criteria: All content announced correctly and comprehensible
Test Procedure¶
2.1 Content Announcement¶
- Page title announced when page loads
- Headings announced with proper level (h1, h2, etc.)
- All text content is readable
- Lists announced as lists with item count
- Tables announced with row/column information
2.2 Interactive Elements¶
- Buttons announced as "button" with clear label
- Links announced as "link" with descriptive text
- Form labels read before input fields
- Required fields announced as "required"
- Button states (disabled, loading) announced
- Checkbox/radio button states announced
2.3 Dynamic Content¶
- ARIA live regions announce updates
- Loading states announced ("loading" or "busy")
- Success/error messages announced
- Modal dialogs announced when opened
- Content changes announced appropriately
- No irrelevant announcements or repetition
2.4 Images and Icons¶
- All images have descriptive alt text
- Decorative images have empty alt=""
- Icon buttons have proper aria-label
- Status icons have text labels (not just color)
- Complex images have extended descriptions
2.5 Navigation¶
- Landmark regions properly identified (header, nav, main, footer)
- Skip-to-content link present and functional
- Navigation menu structure clear
- Current page/section indicated
- Breadcrumbs announced correctly
Results:
Date Tested: __________
Tester: __________
Screen Reader: __________
Status: ☐ Pass ☐ Fail ☐ Needs Review
Issues Found: __________
3. Visual Accessibility Testing¶
Test Setup¶
- Tools Required: Browser DevTools, color picker
- Test Duration: 15-20 minutes
- Passing Criteria: All visual elements meet WCAG AA standards
Test Procedure¶
3.1 Color Contrast¶
- Normal text (< 18pt) has 4.5:1 contrast ratio minimum
- Large text (≥ 18pt) has 3:1 contrast ratio minimum
- UI components have 3:1 contrast ratio minimum
- Focus indicators have 3:1 contrast ratio
- Test with Chrome DevTools color picker
3.2 Color Independence¶
- No information conveyed by color alone
- Status indicators include icons + color
- Required fields marked with asterisk + color
- Error states use icon + color + text
- Charts/graphs have patterns or labels
3.3 Text and Zoom¶
- Text remains readable at 200% zoom
- No horizontal scrolling at 200% zoom
- Layout doesn't break at 200% zoom
- Text can be resized without loss of functionality
- Minimum text size 16px (or 1rem)
3.4 Visual Clarity¶
- Touch targets minimum 44x44px on mobile
- Sufficient spacing between interactive elements
- Text not justified (use left-align)
- Line height at least 1.5 for body text
- Paragraph spacing at least 1.5x line height
Results:
Date Tested: __________
Tester: __________
Status: ☐ Pass ☐ Fail ☐ Needs Review
Issues Found: __________
4. Motion and Animation Testing¶
Test Setup¶
- OS Settings: Enable "Reduce Motion" preference
- Test Duration: 10 minutes
- Passing Criteria: All functionality works without animations
Test Procedure¶
4.1 Enable Reduce Motion¶
Windows: Settings > Ease of Access > Display > Show animations Mac: System Preferences > Accessibility > Display > Reduce motion iOS: Settings > Accessibility > Motion > Reduce Motion Android: Settings > Accessibility > Remove animations
4.2 Test with Reduce Motion Enabled¶
- Page loads without animations
- All transitions are instant or minimal
- No auto-playing videos or animations
- Parallax effects disabled
- Hover effects work without animation
- All functionality accessible without animations
4.3 Motion Design¶
- No flashing content (< 3 flashes per second)
- Animations can be paused/stopped if auto-playing
- Infinite animations have pause control
- No motion-based navigation required
Results:
Date Tested: __________
Tester: __________
Status: ☐ Pass ☐ Fail ☐ Needs Review
Issues Found: __________
5. Color Blindness Testing¶
Test Setup¶
- Tools: Chrome DevTools > Rendering > Emulate vision deficiencies
- Test Duration: 10 minutes
- Passing Criteria: All information accessible with color blindness
Test Procedure¶
5.1 Test Each Vision Deficiency¶
Test the following in DevTools: - [ ] Protanopia (red-blind): ~1% of males - [ ] Deuteranopia (green-blind): ~1% of males - [ ] Tritanopia (blue-blind): rare - [ ] Achromatopsia (no color vision): very rare
5.2 Verify Information Access¶
For each vision deficiency: - [ ] Status indicators distinguishable (have icons) - [ ] Form errors visible and clear - [ ] Required fields identifiable - [ ] Links distinguishable from text (underline or bold) - [ ] Charts/graphs readable with patterns
Results:
Date Tested: __________
Tester: __________
Status: ☐ Pass ☐ Fail ☐ Needs Review
Issues Found: __________
6. Mobile Accessibility Testing¶
Test Setup¶
- Devices: iPhone, Android phone, tablet
- Test Duration: 15-20 minutes per device
- Passing Criteria: Fully accessible on mobile devices
Test Procedure¶
6.1 Touch Accessibility¶
- Touch targets minimum 44x44px
- Sufficient spacing between touch targets (8px minimum)
- Buttons large enough for average finger
- No touch targets overlap
- Pinch-to-zoom enabled
6.2 Mobile Screen Readers¶
iOS VoiceOver: Settings > Accessibility > VoiceOver Android TalkBack: Settings > Accessibility > TalkBack
- All content accessible with screen reader
- Swipe navigation works correctly
- Headings navigable with rotor/TalkBack menu
- Forms completable with screen reader
- Touch targets properly announced
6.3 Mobile Responsiveness¶
- Layout adapts to small screens (320px+)
- No horizontal scrolling
- Text readable without zoom
- Form inputs don't cause page zoom (16px min)
- Interactive elements accessible in portrait and landscape
Results:
Date Tested: __________
Tester: __________
Device: __________
Status: ☐ Pass ☐ Fail ☐ Needs Review
Issues Found: __________
7. Cross-Browser Testing¶
Test Setup¶
- Browsers: Chrome, Firefox, Safari, Edge
- Test Duration: 10 minutes per browser
- Passing Criteria: Consistent accessibility across browsers
Test Procedure¶
7.1 Test Each Browser¶
For each browser: - [ ] All content renders correctly - [ ] Focus indicators visible - [ ] Keyboard navigation works - [ ] Form validation works - [ ] ARIA attributes respected - [ ] No JavaScript errors in console
7.2 Browser-Specific Features¶
- Chrome: Lighthouse audit passes
- Firefox: Accessibility inspector shows no errors
- Safari: VoiceOver works correctly
- Edge: Narrator works correctly
Results:
Date Tested: __________
Tester: __________
Browsers Tested: __________
Status: ☐ Pass ☐ Fail ☐ Needs Review
Issues Found: __________
8. Automated Tool Audits¶
Required Tools¶
- Lighthouse (Chrome DevTools)
- axe DevTools (Browser extension)
- WAVE (Browser extension)
Test Procedure¶
8.1 Lighthouse Audit¶
- Open Chrome DevTools > Lighthouse
- Select "Accessibility" category
- Run audit on each major page
- Target Score: 100
- Fix all issues and re-run
Pages to Test: - [ ] Landing page (/) - [ ] Platform selector (/select) - [ ] ClearPath app (/clearpath) - [ ] FairWins app (/fairwins)
8.2 axe DevTools Audit¶
- Install axe DevTools extension
- Open DevTools > axe DevTools
- Click "Scan ALL of my page"
- Review and fix all issues
- Target: 0 violations
8.3 WAVE Audit¶
- Install WAVE extension
- Click WAVE icon on each page
- Review all errors and alerts
- Fix all WCAG AA violations
- Target: 0 errors
Results:
Date Tested: __________
Tester: __________
Lighthouse Score: __________/100
axe Violations: __________
WAVE Errors: __________
Status: ☐ Pass ☐ Fail ☐ Needs Review
Pre-Deployment Checklist¶
Before merging to main and deploying to production, verify:
- All manual tests completed and passed
- Lighthouse accessibility score = 100
- axe DevTools shows 0 violations
- WAVE shows 0 errors
- Keyboard navigation fully functional
- Screen reader testing completed
- Mobile accessibility verified
- Cross-browser testing passed
- Color contrast meets WCAG AA
- Motion preferences respected
- Color blindness testing passed
- All issues documented and resolved
Sign-off:
Issue Reporting Template¶
When accessibility issues are found, use this template:
## Accessibility Issue
**Severity**: [ ] Critical [ ] High [ ] Medium [ ] Low
**WCAG Criterion**: [e.g., 1.4.3 Contrast (Minimum)]
**Description**: [Describe the issue]
**Steps to Reproduce**:
1.
2.
3.
**Expected Behavior**: [What should happen]
**Actual Behavior**: [What actually happens]
**Affected Users**: [Who is impacted]
**Suggested Fix**: [How to fix]
**Screenshot/Recording**: [Attach if applicable]
Resources¶
Testing Tools¶
- NVDA: https://www.nvaccess.org/download/
- axe DevTools: https://www.deque.com/axe/devtools/
- WAVE: https://wave.webaim.org/extension/
- Lighthouse: Built into Chrome DevTools
Guidelines¶
- WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/
- MDN Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility
- WebAIM: https://webaim.org/
Training¶
- Google Web Accessibility: https://web.dev/accessibility/
- Deque University: https://dequeuniversity.com/
- A11ycasts: https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
Document Version: 1.0 Last Updated: December 2024 Maintained By: Frontend Team