Testing with Screen Readers

Testing with Screen Readers

Automated accessibility testing catches many issues, but real screen reader testing is essential for understanding the user experience. This guide covers practical screen reader testing techniques using the most common tools.

Why Test with Screen Readers?

Automated tools can't catch everything:

• Focus order that's technically correct but confusing
• Content that doesn't make sense when read aloud
• Missing context that sighted users get visually
• Interactive patterns that don't follow expected conventions
• Reading order issues
• Dynamic content timing problems

Screen Reader Options

VoiceOver (macOS/iOS)

Built into Apple devices, widely used:

Enable: System Preferences > Accessibility > VoiceOver
Quick toggle: Cmd + F5

NVDA (Windows)

Free, open-source, and popular:

Download from nvaccess.org
Quick toggle: Insert + Q to exit

JAWS (Windows)

Commercial, industry standard:

40-minute demo mode available
Most comprehensive features

TalkBack (Android)

Built into Android devices:

Enable: Settings > Accessibility > TalkBack

VoiceOver Basics

Essential keyboard commands:

| Command | Action |

|---------|--------|

| Cmd + F5 | Toggle VoiceOver |

| VO + A | Read from cursor |

| VO + Right | Next element |

| VO + Left | Previous element |

| VO + Space | Activate (click) |

| VO + U | Open Rotor |

| Ctrl | Stop speaking |

(VO = Control + Option)

The VoiceOver Rotor

The Rotor (VO + U) provides quick navigation:

• Headings
• Links
• Form controls
• Landmarks
• Tables

Navigate with Left/Right arrows, select with Enter.

NVDA Basics

Essential keyboard commands:

| Command | Action |

|---------|--------|

| Insert + Q | Exit NVDA |

| Insert + Down | Read continuously |

| Down Arrow | Next line |

| Tab | Next focusable |

| Insert + F7 | Elements list |

| H | Next heading |

| B | Next button |

| F | Next form field |

| Ctrl | Stop speaking |

NVDA Browse vs Focus Mode

• Browse Mode: Navigate with arrow keys, use shortcuts
• Focus Mode: Typing in form fields, NVDA passes keys through

NVDA auto-switches, or use Insert + Space to toggle.

What to Test

1. Page Structure

Checklist:
- [ ] Page title is descriptive
- [ ] Heading hierarchy makes sense
- [ ] Landmarks are present and labeled
- [ ] Skip links work
- [ ] Main content is easy to find

Test method:

1. Open VoiceOver Rotor (VO + U)
2. Navigate to Headings
3. Review the heading outline
4. Check for logical structure

2. Navigation

Checklist:
- [ ] All navigation items accessible
- [ ] Current page/state announced
- [ ] Submenus work correctly
- [ ] Mobile menu is accessible

Test method:

1. Tab through navigation
2. Listen to announcements
3. Open/close submenus
4. Verify current page indication

3. Forms

Checklist:
- [ ] All fields have labels
- [ ] Required fields announced
- [ ] Errors are announced
- [ ] Error messages identify the field
- [ ] Submit button clearly labeled

Test method:

1. Use NVDA's forms mode (F)
2. Move through each field
3. Submit with errors
4. Verify error handling

4. Interactive Components

Checklist:
- [ ] Buttons announce purpose
- [ ] Expandable content announces state
- [ ] Modals trap focus
- [ ] Tab panels work correctly
- [ ] Autocomplete announces suggestions

Test method:

1. Navigate to component
2. Activate with Enter/Space
3. Check state changes announced
4. Verify expected keyboard patterns

5. Dynamic Content

Checklist:
- [ ] Notifications announced
- [ ] Loading states indicated
- [ ] Updated content announced
- [ ] Error alerts interrupt appropriately

Test method:

1. Trigger dynamic updates
2. Listen for announcements
3. Check timing (not too fast/slow)
4. Verify appropriate politeness level

Practical Test Script

Walk through this for each page:

1. Load page with screen reader
   - Is page title announced?
   - Is any important content auto-read?

2. Navigate by headings
   - Is structure logical?
   - Are headings descriptive?

3. Check landmarks
   - Can you find main content quickly?
   - Are regions labeled?

4. Tab through interactive elements
   - All elements reachable?
   - Announcements make sense?
   - Focus order logical?

5. Fill out forms
   - Fields labeled correctly?
   - Errors announced?
   - Can submit successfully?

6. Test custom widgets
   - Expected keyboard patterns work?
   - State changes announced?
   - Focus managed correctly?

Common Issues Found

1. Missing Labels

Symptom: Screen reader says "button" or "edit text" with no context

Fix:

<button aria-label="Close dialog">X</button>
<label for="search">Search</label>
<input id="search" type="search">

2. Incorrect Reading Order

Symptom: Content read in wrong order

Fix: Ensure DOM order matches visual order; don't rely on CSS for reading order

3. Missing State Changes

Symptom: Screen reader doesn't announce when something opens/closes

Fix:

<button aria-expanded="true" aria-controls="menu">Menu</button>

4. Focus Lost After Interaction

Symptom: After closing modal, focus disappears

Fix:

// Return focus to trigger element
buttonRef.current?.focus();

Recording Test Results

Document findings systematically:

## Page: /checkout

### Screen Reader: VoiceOver + Chrome

| Issue | Severity | Location | Details |
|-------|----------|----------|---------|
| Missing label | High | Card number input | Announced as "edit text" |
| Wrong order | Medium | Order summary | Total announced before items |
| No state | Medium | Promo code | Expand/collapse not announced |

Screen Reader Testing Checklist

• Tested with at least one screen reader
• All interactive elements have names
• Heading structure is logical
• Form labels are announced
• Error messages are announced
• Dynamic content uses live regions
• Focus is managed correctly
• Custom widgets follow expected patterns