mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-24 13:11:09 -05:00
edcd8f2076
- Introduced a comprehensive Secret Management Guide detailing best practices, secret classification, development setup, production management, rotation procedures, and emergency protocols. - Implemented a client-side performance monitoring script to track various metrics including page load performance, paint metrics, layout shifts, and memory usage. - Enhanced search accessibility with keyboard navigation support for search results, ensuring compliance with WCAG standards and improving user experience.
201 lines
6.4 KiB
Markdown
201 lines
6.4 KiB
Markdown
# Screen Reader Testing Checklist
|
|
|
|
This document provides a comprehensive checklist for testing ThrillWiki with screen readers to ensure WCAG 2.1 AA compliance.
|
|
|
|
## Recommended Screen Readers
|
|
|
|
| Screen Reader | Platform | Cost | Notes |
|
|
|--------------|----------|------|-------|
|
|
| NVDA | Windows | Free | Most widely used free option |
|
|
| JAWS | Windows | Commercial | Industry standard |
|
|
| VoiceOver | macOS/iOS | Built-in | Activate with Cmd+F5 |
|
|
| TalkBack | Android | Built-in | Enable in Accessibility settings |
|
|
| Narrator | Windows | Built-in | Basic testing |
|
|
|
|
## Test Scenarios
|
|
|
|
### Navigation
|
|
|
|
- [ ] Skip to main content link works and is announced
|
|
- [ ] All navigation items are announced with their role
|
|
- [ ] Current page is indicated (aria-current="page")
|
|
- [ ] Dropdown menus announce as "button, collapsed" when closed
|
|
- [ ] Dropdown menus announce as "button, expanded" when open
|
|
- [ ] Menu items announce with role="menuitem"
|
|
- [ ] Breadcrumbs are announced as navigation landmark
|
|
|
|
### Search
|
|
|
|
- [ ] Search input is announced with label "Search parks and rides"
|
|
- [ ] Search results count is announced when results appear
|
|
- [ ] Each result is announced with its content
|
|
- [ ] Arrow key navigation announces current selection
|
|
- [ ] "No results found" is announced when applicable
|
|
|
|
### Forms
|
|
|
|
- [ ] All form fields have associated labels announced
|
|
- [ ] Required fields announce "required"
|
|
- [ ] Error messages are announced immediately when form validates
|
|
- [ ] Success messages are announced after form submission
|
|
- [ ] Help text is associated and announced with fields
|
|
- [ ] Field types are announced (text input, checkbox, select, etc.)
|
|
|
|
### Interactive Components
|
|
|
|
- [ ] Buttons announce their purpose/label
|
|
- [ ] Icon-only buttons announce their aria-label
|
|
- [ ] Links announce destination or purpose
|
|
- [ ] Modals announce their title when opened
|
|
- [ ] Modal content is announced as dialog
|
|
- [ ] Closing modal announces return to previous context
|
|
- [ ] Theme toggle announces current state (pressed/not pressed)
|
|
|
|
### Dynamic Content
|
|
|
|
- [ ] Search results are announced via aria-live region
|
|
- [ ] Filter changes announce result count
|
|
- [ ] Status updates (success, error) are announced
|
|
- [ ] Loading states are announced ("Loading...")
|
|
- [ ] HTMX content swaps announce via live regions
|
|
|
|
### Images
|
|
|
|
- [ ] All meaningful images have descriptive alt text
|
|
- [ ] Decorative images are hidden (alt="" or aria-hidden)
|
|
- [ ] Complex images have long descriptions available
|
|
- [ ] Avatar images include user's name in alt text
|
|
|
|
### Tables (if applicable)
|
|
|
|
- [ ] Tables have proper headers (th elements)
|
|
- [ ] Table caption or aria-label describes table purpose
|
|
- [ ] Data cells associate with headers
|
|
|
|
### Headings
|
|
|
|
- [ ] Page has exactly one h1
|
|
- [ ] Heading hierarchy is logical (h1 > h2 > h3)
|
|
- [ ] No skipped heading levels
|
|
- [ ] Headings describe section content
|
|
|
|
## Testing Commands
|
|
|
|
### NVDA (Windows)
|
|
|
|
| Command | Action |
|
|
|---------|--------|
|
|
| Insert + Down Arrow | Read next item |
|
|
| Insert + Up Arrow | Read previous item |
|
|
| Insert + Space | Read current item |
|
|
| Insert + F7 | Elements list (links, headings, landmarks) |
|
|
| H | Next heading |
|
|
| Shift + H | Previous heading |
|
|
| K | Next link |
|
|
| F | Next form field |
|
|
| D | Next landmark |
|
|
| Insert + Ctrl + N | Read notifications |
|
|
|
|
### VoiceOver (macOS)
|
|
|
|
| Command | Action |
|
|
|---------|--------|
|
|
| VO + Right Arrow | Next item |
|
|
| VO + Left Arrow | Previous item |
|
|
| VO + U | Rotor (elements list) |
|
|
| VO + A | Read all from current position |
|
|
| VO + Cmd + H | Next heading |
|
|
| VO + Cmd + J | Next form control |
|
|
| VO + Cmd + L | Next link |
|
|
|
|
Note: VO = Control + Option
|
|
|
|
### VoiceOver (iOS)
|
|
|
|
| Gesture | Action |
|
|
|---------|--------|
|
|
| Swipe Right | Next item |
|
|
| Swipe Left | Previous item |
|
|
| Double Tap | Activate item |
|
|
| Two-finger Swipe Up | Read all from current position |
|
|
| Rotor (two-finger twist) | Change navigation mode |
|
|
|
|
### JAWS (Windows)
|
|
|
|
| Command | Action |
|
|
|---------|--------|
|
|
| Down Arrow | Next item |
|
|
| Up Arrow | Previous item |
|
|
| Insert + F5 | Forms list |
|
|
| Insert + F6 | Headings list |
|
|
| Insert + F7 | Links list |
|
|
| H | Next heading |
|
|
| F | Next form field |
|
|
| T | Next table |
|
|
| R | Next region/landmark |
|
|
|
|
### TalkBack (Android)
|
|
|
|
| Gesture | Action |
|
|
|---------|--------|
|
|
| Swipe Right | Next item |
|
|
| Swipe Left | Previous item |
|
|
| Double Tap | Activate item |
|
|
| Swipe Up then Down | Navigation settings |
|
|
|
|
## Common Issues to Watch For
|
|
|
|
### Problematic Patterns
|
|
1. **Missing labels**: Form fields without associated labels
|
|
2. **Duplicate IDs**: Multiple elements with same ID breaks aria-describedby
|
|
3. **Empty buttons**: Buttons with no text or aria-label
|
|
4. **Inaccessible modals**: Focus not trapped, no escape to close
|
|
5. **Auto-playing media**: Audio/video that plays automatically
|
|
6. **Timeout without warning**: Sessions expiring without notice
|
|
7. **Moving focus unexpectedly**: Focus jumping after interactions
|
|
8. **Color-only information**: Status conveyed only by color
|
|
|
|
### Good Patterns
|
|
1. **Clear labels**: Every form field has descriptive label
|
|
2. **Error prevention**: Clear instructions, validation before submit
|
|
3. **Focus management**: Logical order, visible indicators, trapped in modals
|
|
4. **Consistent navigation**: Same navigation pattern on all pages
|
|
5. **Multiple ways**: Multiple paths to same content
|
|
6. **Descriptive links**: Link text describes destination (not "click here")
|
|
|
|
## Reporting Issues
|
|
|
|
When reporting accessibility issues, include:
|
|
1. Screen reader and version used
|
|
2. Browser and version
|
|
3. Page URL
|
|
4. Steps to reproduce
|
|
5. Expected behavior
|
|
6. Actual behavior (what was announced)
|
|
7. WCAG success criterion violated
|
|
|
|
## WCAG 2.1 AA Quick Reference
|
|
|
|
### Level A (Must Have)
|
|
- 1.1.1 Non-text Content (alt text)
|
|
- 1.3.1 Info and Relationships (semantic HTML)
|
|
- 2.1.1 Keyboard (all functionality via keyboard)
|
|
- 2.4.1 Bypass Blocks (skip links)
|
|
- 4.1.2 Name, Role, Value (ARIA)
|
|
|
|
### Level AA (Should Have)
|
|
- 1.4.3 Contrast (Minimum) (4.5:1 ratio)
|
|
- 1.4.4 Resize Text (200% zoom)
|
|
- 2.4.6 Headings and Labels (descriptive)
|
|
- 2.4.7 Focus Visible (visible focus indicator)
|
|
- 3.2.3 Consistent Navigation
|
|
- 3.2.4 Consistent Identification
|
|
|
|
## Resources
|
|
|
|
- [WCAG 2.1 Guidelines](https://www.w3.org/TR/WCAG21/)
|
|
- [WebAIM Screen Reader Survey](https://webaim.org/projects/screenreadersurvey9/)
|
|
- [NVDA User Guide](https://www.nvaccess.org/files/nvda/documentation/userGuide.html)
|
|
- [VoiceOver User Guide](https://support.apple.com/guide/voiceover/welcome/mac)
|
|
- [JAWS Quick Start](https://www.freedomscientific.com/products/software/jaws/)
|