Screen Reader Testing Guide: NVDA, JAWS, and VoiceOver (2025)

You can't build an accessible website without testing it with a screen reader. Period.

Automated tools catch technical violations, but screen readers reveal the actual user experience for blind and low-vision users—15 million people in the US alone.

This guide teaches you how to test with the three most popular screen readers, even if you've never used one before.

Why Screen Reader Testing Matters

Real-world stat: 98% of websites have accessibility issues that automated tools can't detect. Screen reader testing catches:

• Meaningless alt text ("image.jpg" vs "Product packaging showing blue label")
• Confusing navigation (headings out of order, missing landmarks)
• Broken forms (unlabeled inputs, unclear error messages)
• Content that exists visually but is invisible to screen readers

Legal context: Courts expect you to test with assistive technologies. Saying "our automated scan passed" won't prevent lawsuits if screen reader users can't use your site.

Screen Reader Market Share (2024)

1. JAWS - 40% (Windows, $95/year)
2. NVDA - 32% (Windows, free)
3. VoiceOver - 20% (Mac/iOS, free)
4. TalkBack - 5% (Android, free)
5. Other - 3%

Recommendation: Test with NVDA (free) and VoiceOver (if you have a Mac). This covers 52% of users and costs $0.

Getting Started with NVDA (Windows)

Installation

1. Download from https://www.nvaccess.org/download/ (opens in new tab)
2. Run installer
3. Restart computer
4. NVDA starts automatically (disable in settings if unwanted)

Basic Controls

NVDA Key: Usually Insert or Caps Lock (configurable)

Your First Test

1. Start NVDA (Ctrl + Alt + N)
2. Open your website in Firefox or Chrome
3. Close your eyes (seriously—this is how users experience it)
4. Navigate with keyboard only:
   • Press H to jump between headings
   • Press K to jump between links
   • Press F to jump to form fields
   • Press D to jump between landmarks (nav, main, footer)

What to listen for:

• ✅ Clear headings - "Heading level 1: Welcome to our site"
• ✅ Descriptive links - "Link: View pricing details"
• ✅ Labeled forms - "Email address, edit, required"
• ❌ "Link" (no text = broken)
• ❌ "Clickable clickable" (bad ARIA usage)
• ❌ "Image" (missing alt text)

Testing a Form

Example form:

<form>
  <label for="email">Email address *</label>
  <input id="email" type="email" aria-required="true" />
  
  <label for="password">Password</label>
  <input id="password" type="password" aria-describedby="password-hint" />
  <span id="password-hint">Must be at least 8 characters</span>
  
  <button type="submit">Sign up</button>
</form>

What NVDA should announce:

1. Tab to email field → "Email address, edit, required, blank"
2. Tab to password field → "Password, edit, blank"
3. (Automatically reads hint) → "Must be at least 8 characters"
4. Tab to button → "Sign up, button"

Bad example:

<input placeholder="Email" />  <!-- No label! -->

NVDA says: "Edit, blank" (user has no idea what to enter)

Getting Started with VoiceOver (Mac)

Activation

Mac:

• Turn on: Cmd + F5
• Turn off: Cmd + F5

iPhone/iPad:

• Settings → Accessibility → VoiceOver → On
• Triple-click side button (shortcut)

Basic Controls (Mac)

VO = Control + Option

Your First Test (Mac)

1. Start VoiceOver (Cmd + F5)
2. Open Safari (VoiceOver works best with Safari)
3. Navigate your site:
   • VO + Right Arrow to move through content
   • VO + U to open rotor (list of headings, links, landmarks)
   • VO + Cmd + H to jump between headings

What to listen for:

• Smooth navigation flow
• No "unlabeled" or "blank" announcements
• Logical reading order (content makes sense sequentially)

Testing a Modal Dialog

Accessible modal:

<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Confirm deletion</h2>
  <p>Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</div>

What VoiceOver should do:

1. Focus moves to modal automatically
2. Announces: "Dialog, Confirm deletion"
3. Can't Tab outside modal (focus trapped)
4. Escape key closes modal
5. Focus returns to trigger button after closing

Getting Started with JAWS (Windows)

Note: JAWS costs $95/year. Use NVDA (free) unless you specifically need to test JAWS compatibility.

Basic Controls

JAWS Key: Usually Insert

Key Differences from NVDA

• Forms mode - JAWS automatically switches to "forms mode" when entering form fields (NVDA doesn't)
• Verbosity - JAWS is more verbose by default (announces more details)
• Virtual cursor - JAWS uses a virtual cursor that sometimes behaves differently

Common Testing Scenarios

Scenario 1: Navigating a Product Page

Test checklist:

• Can I identify main heading (product name)?
• Can I find product description?
• Can I locate price?
• Can I find "Add to cart" button?
• Are images described meaningfully?
• Can I read reviews?

Navigate using:

• H key (headings)
• K key (links)
• B key (buttons)
• G key (graphics/images)

Scenario 2: Completing Checkout

Test checklist:

• Are all form fields labeled?
• Do error messages make sense?
• Can I navigate with Tab key only?
• Are required fields marked?
• Can I submit form?

Scenario 3: Reading a Blog Post

Test checklist:

• Logical heading hierarchy (H1 → H2 → H3)?
• Can I skip navigation and jump to content?
• Are code blocks readable?
• Do images add context or are they decorative?

Troubleshooting Common Issues

Issue 1: "Clickable, clickable, image"

Problem: Over-nesting interactive elements

<!-- ❌ Bad -->
<button>
  <div>
    <img src="icon.svg" />
    <span>Click me</span>
  </div>
</button>

Solution: Flatten structure

<!-- ✅ Good -->
<button>
  <img src="icon.svg" alt="" role="presentation" />
  Click me
</button>

Issue 2: "Blank, blank, blank"

Problem: Content exists visually but not in accessibility tree

<!-- ❌ Bad: Icon font without label -->
<button><i class="fa fa-trash"></i></button>

Solution: Add accessible label

<!-- ✅ Good -->
<button aria-label="Delete item">
  <i class="fa fa-trash" aria-hidden="true"></i>
</button>

Issue 3: Tab Key Does Nothing

Problem: Missing tabindex or broken focus management

<!-- ❌ Bad: Div acting as button -->
<div onClick={handleClick}>Submit</div>

Solution: Use semantic HTML

<!-- ✅ Good -->
<button onClick={handleClick}>Submit</button>

Advanced Testing Techniques

Testing Dynamic Content Updates

Test: Add item to cart without page reload Expected behavior:

• Screen reader announces "Item added to cart" (aria-live)
• Focus doesn't move unexpectedly
• Cart count updates are announced

<div role="status" aria-live="polite" aria-atomic="true">
  Item added to cart
</div>

Testing Single-Page Apps (SPAs)

Challenge: Route changes don't trigger page announcements Solution: Manually announce page changes

// On route change
const announcement = document.createElement('div');
announcement.setAttribute('role', 'status');
announcement.setAttribute('aria-live', 'polite');
announcement.textContent = `Navigated to ${pageTitle}`;
document.body.appendChild(announcement);

// Remove after announcement
setTimeout(() => announcement.remove(), 1000);

Testing Focus Order

Test: Tab through entire page Expected: Logical focus order (matches visual layout) Red flags:

• Focus jumps randomly
• Important elements can't be reached
• Focus gets trapped

Screen Reader Testing Checklist

Before testing:

• Close your eyes (or turn off monitor)
• Use headphones (hear exactly what users hear)
• Don't use mouse (keyboard + screen reader only)

During testing:

• Can I complete primary user journey?
• Do I understand all content?
• Are errors and successes announced?
• Can I navigate efficiently (headings, landmarks)?

After testing:

• Document issues found
• Prioritize by severity
• Retest after fixes

Resources

Free screen readers:

• NVDA (opens in new tab) (Windows)
• VoiceOver (opens in new tab) (Mac/iOS, built-in)
• TalkBack (opens in new tab) (Android, built-in)

Learning resources:

• WebAIM Screen Reader Testing (opens in new tab)
• NVDA User Guide (opens in new tab)
• VoiceOver User Guide (opens in new tab)

Automated testing (supplement, not replacement):

• AccessMend WCAG Scanner

Quick Start

1. Install NVDA (free for Windows) or use VoiceOver (built-in on Mac)
2. Close your eyes
3. Navigate your homepage using only keyboard + screen reader
4. Try to complete a task (make a purchase, fill out form, etc.)
5. If you can't do it easily, neither can your users

Screen reader testing reveals the truth about your website's accessibility. Start testing today.

---

Found accessibility issues? Get a free WCAG report to identify and fix them.