Screen Reader Testing

Screen readers are assistive technologies that convert on-screen content into speech or braille output. They are the primary way blind and severely visually impaired people interact with computers and the web. Testing with a screen reader is one of the most valuable things you can do to understand how accessible your site truly is — and it often reveals issues that no automated tool or visual inspection would catch.

Overview of Major Screen Readers

There are several screen readers in common use, and the accessibility of your site may vary between them. Here are the most important ones to know:

VoiceOver (macOS and iOS)

VoiceOver is Apple's built-in screen reader, available on macOS, iOS, iPadOS, watchOS, and tvOS. It is the most commonly used screen reader on mobile devices and is widely used on desktop by Mac users.

• Platform: macOS and iOS (built-in, no installation needed)
• Cost: Free (included with the operating system)
• Best browser pairing: Safari on macOS, Safari on iOS
• Key advantage: The most common screen reader for mobile web testing
• Market share: The most-used screen reader on mobile; second most-used on desktop (behind JAWS)

NVDA (Windows)

NVDA (NonVisual Desktop Access) is a free, open-source screen reader for Windows. It is the most popular free screen reader and is widely used by both screen reader users and developers for testing.

• Platform: Windows
• Cost: Free and open-source
• Best browser pairing: Firefox or Chrome on Windows
• Key advantage: Free, actively maintained, and widely used — making it the best choice for developers on Windows who need a testing tool
• Market share: Second most-used desktop screen reader globally

JAWS (Windows)

JAWS (Job Access With Speech) is the longest-standing commercial screen reader for Windows, developed by Freedom Scientific. It is the most widely used desktop screen reader, particularly in enterprise and government environments.

• Platform: Windows
• Cost: Commercial license (approximately $1,000 for a standard license, with annual maintenance fees)
• Best browser pairing: Chrome or Edge on Windows
• Key advantage: The most widely used desktop screen reader; if your site works with JAWS, it works for the largest share of desktop screen reader users
• Market share: The most-used desktop screen reader (over 50% of desktop screen reader users according to WebAIM surveys)

Narrator (Windows)

Narrator is Microsoft's built-in screen reader for Windows. While it has improved significantly in recent years, it is less commonly used than JAWS or NVDA for web browsing.

• Platform: Windows (built-in)
• Cost: Free (included with Windows)
• Best browser pairing: Microsoft Edge
• Key advantage: Available on every Windows machine without installation; useful for quick checks
• Limitation: Less feature-rich than JAWS or NVDA for web testing; lower market share among screen reader users

Basic Commands for Each Screen Reader

VoiceOver on macOS

• Toggle VoiceOver on/off: Cmd + F5 (or press the Touch Bar if available)
• VoiceOver modifier key (VO): Control + Option
• Move to next item: VO + Right Arrow
• Move to previous item: VO + Left Arrow
• Activate/click: VO + Space
• Read current item: VO + A
• Open rotor (navigate by headings, links, etc.): VO + U
• Navigate by headings: Use the rotor (VO + U), then select Headings
• Navigate by landmarks: Use the rotor, then select Landmarks

NVDA on Windows

• Toggle NVDA on/off: Ctrl + Alt + N (to start); NVDA + Q (to quit)
• NVDA modifier key: Insert (or Caps Lock if configured)
• Move to next item: Down Arrow (in browse mode)
• Move to previous item: Up Arrow
• Activate/click: Enter
• Next heading: H
• Next landmark: D
• Next link: K
• Next form field: F
• Elements list (like rotor): NVDA + F7
• Toggle between browse and focus mode: NVDA + Space

JAWS on Windows

• Toggle JAWS: Launch from the Start menu; Insert + F4 to quit
• JAWS modifier key: Insert
• Move to next item: Down Arrow
• Move to previous item: Up Arrow
• Next heading: H
• Next landmark: R
• Next link: Tab (visited links: V, unvisited: U)
• Headings list: Insert + F6
• Links list: Insert + F7

Narrator on Windows

• Toggle Narrator on/off: Win + Ctrl + Enter
• Narrator modifier key: Caps Lock (or Insert)
• Move to next item: Caps Lock + Right Arrow
• Move to previous item: Caps Lock + Left Arrow
• Activate: Caps Lock + Enter
• Next heading: H
• Next landmark: D

Common Screen Reader Issues to Test For

When testing with a screen reader, pay attention to these common problems:

Images Without Alt Text

Screen readers announce images without alt text by reading the file name, which is typically meaningless (e.g., "IMG_4872.jpg" or "hero-banner-v3-final.png"). Every informative image must have a descriptive alt attribute. Decorative images should use alt="" (empty string) so the screen reader skips them entirely.

Unlabeled Buttons

Buttons with only an icon and no text are announced as "button" with no indication of what they do. Icon buttons need an aria-label or visually hidden text:

<!-- Bad: Screen reader says "button" -->
<button><i class="fa-solid fa-search"></i></button>

<!-- Good: Screen reader says "Search, button" -->
<button aria-label="Search">
  <i class="fa-solid fa-search" aria-hidden="true"></i>
</button>

Improper Heading Hierarchy

Screen reader users frequently navigate by headings to scan page structure. If headings skip levels (e.g., <h1> followed by <h3> with no <h2>), the user may think they are missing a section. Ensure headings follow a logical nested structure.

Missing Landmark Regions

Screen readers allow users to jump between landmark regions (<header>, <nav>, <main>, <footer>, <aside>). If your page does not use these semantic elements (or equivalent ARIA roles), screen reader users lose a major navigation shortcut.

Inaccessible Custom Widgets

Custom-built tabs, accordions, carousels, date pickers, and autocomplete components often lack the ARIA roles, states, and keyboard interactions that screen readers expect. Test these thoroughly:

• Tab panels should use role="tablist", role="tab", and role="tabpanel" with appropriate aria-selected and aria-controls attributes
• Accordions should communicate their expanded/collapsed state with aria-expanded
• Custom dropdowns should use role="listbox" and role="option" or the native <select> element

Step-by-Step: Testing with VoiceOver on macOS

Here is a practical walkthrough for testing a web page with VoiceOver on macOS:

1. Open Safari and navigate to your page. VoiceOver works best with Safari on macOS.
2. Turn on VoiceOver with Cmd + F5. You will hear an introductory message.
3. Navigate to the web content using VO + Right Arrow to move through elements sequentially.
4. Check the page title. When the page loads, VoiceOver should announce the page title. If it says "Untitled" or something generic, the <title> element needs improvement.
5. Test heading navigation. Press VO + U to open the rotor, navigate to Headings, and verify:
   • There is exactly one <h1>
   • Headings follow a logical hierarchy
   • Heading text is descriptive
6. Test landmark navigation. In the rotor, switch to Landmarks and verify the page has appropriate regions (navigation, main, footer, etc.).
7. Navigate through all content. Move through the entire page with VO + Right Arrow. Listen for:
   • Images announced by their alt text (or skipped if decorative)
   • Links announced with their link text
   • Form fields announced with their labels
   • Buttons announced with their names
8. Test interactive components. Navigate to forms, buttons, dropdowns, and custom widgets. Try to complete tasks using only VoiceOver commands.
9. Test dynamic content. Trigger actions that update the page (submit a form, open a modal, toggle an accordion). Listen for announcements of changes.
10. Turn off VoiceOver with Cmd + F5 when finished.

Step-by-Step: Testing with NVDA on Windows

Here is a practical walkthrough for testing with NVDA on Windows:

1. Download and install NVDA from nvaccess.org. It is free.
2. Open Firefox or Chrome and navigate to your page. NVDA works best with Firefox.
3. Start NVDA with Ctrl + Alt + N. You will hear a startup sound.
4. Navigate through the page using Down Arrow to move through elements in browse mode.
5. Test heading navigation. Press H to jump to the next heading. Press Shift + H to go to the previous heading. Verify the hierarchy is logical.
6. Test landmarks. Press D to jump between landmark regions.
7. Open the Elements List. Press NVDA + F7 to see a list of headings, links, form fields, and landmarks on the page. This gives you a structural overview similar to VoiceOver's rotor.
8. Test forms. Navigate to a form and press Enter or NVDA + Space to enter focus mode. Tab through form fields and verify labels are announced correctly.
9. Test interactive components. Try custom widgets, modals, and dynamic content. Listen for ARIA state announcements (expanded, collapsed, selected, etc.).
10. Quit NVDA with NVDA + Q when finished.

Screen Reader Testing Best Practices

• Test with at least two screen readers if possible — VoiceOver on macOS and NVDA on Windows cover the majority of users
• Use the recommended browser for each screen reader (Safari for VoiceOver, Firefox for NVDA, Chrome for JAWS)
• Close your eyes occasionally to simulate the experience of a blind user — you will quickly discover what is confusing
• Test after every major change to catch regressions early
• Listen for unexpected silence — if the screen reader goes quiet when it should be announcing something, there is likely a missing label, role, or live region
• Test on mobile too — VoiceOver on iOS and TalkBack on Android are the primary mobile screen readers