Screen Reader Testing

Practical guide to testing web applications with screen readers for comprehensive accessibility validation.

When to Use This Skill

• Validating screen reader compatibility

• Testing ARIA implementations

• Debugging assistive technology issues

• Verifying form accessibility

• Testing dynamic content announcements

• Ensuring navigation accessibility

Core Concepts

1. Major Screen Readers

Screen Reader

Platform

Browser

Usage

VoiceOver

macOS/iOS

Safari

~15%

NVDA

Windows

Firefox/Chrome

~31%

JAWS

Windows

Chrome/IE

~40%

TalkBack

Android

Chrome

~10%

Narrator

Windows

Edge

~4%

2. Testing Priority

Minimum Coverage:

1. NVDA + Firefox (Windows)

2. VoiceOver + Safari (macOS)

3. VoiceOver + Safari (iOS)

Comprehensive Coverage:

+ JAWS + Chrome (Windows)

+ TalkBack + Chrome (Android)

+ Narrator + Edge (Windows)

3. Screen Reader Modes

Mode

Purpose

When Used

Browse/Virtual

Read content

Default reading

Focus/Forms

Interact with controls

Filling forms

Application

Custom widgets

ARIA applications

VoiceOver (macOS)

Setup

Enable: System Preferences → Accessibility → VoiceOver

Toggle: Cmd + F5

Quick Toggle: Triple-press Touch ID

Essential Commands

Navigation:

VO = Ctrl + Option (VoiceOver modifier)

VO + Right Arrow   Next element

VO + Left Arrow    Previous element

VO + Shift + Down  Enter group

VO + Shift + Up    Exit group

Reading:

VO + A             Read all from cursor

Ctrl               Stop speaking

VO + B             Read current paragraph

Interaction:

VO + Space         Activate element

VO + Shift + M     Open menu

Tab                Next focusable element

Shift + Tab        Previous focusable element

Rotor (VO + U):

Navigate by: Headings, Links, Forms, Landmarks

Left/Right Arrow   Change rotor category

Up/Down Arrow      Navigate within category

Enter              Go to item

Web Specific:

VO + Cmd + H       Next heading

VO + Cmd + J       Next form control

VO + Cmd + L       Next link

VO + Cmd + T       Next table

Testing Checklist

## VoiceOver Testing Checklist

### Page Load

- [ ] Page title announced

- [ ] Main landmark found

- [ ] Skip link works

### Navigation

- [ ] All headings discoverable via rotor

- [ ] Heading levels logical (H1 → H2 → H3)

- [ ] Landmarks properly labeled

- [ ] Skip links functional

### Links & Buttons

- [ ] Link purpose clear

- [ ] Button actions described

- [ ] New window/tab announced

### Forms

- [ ] All labels read with inputs

- [ ] Required fields announced

- [ ] Error messages read

- [ ] Instructions available

- [ ] Focus moves to errors

### Dynamic Content

- [ ] Alerts announced immediately

- [ ] Loading states communicated

- [ ] Content updates announced

- [ ] Modals trap focus correctly

### Tables

- [ ] Headers associated with cells

- [ ] Table navigation works

- [ ] Complex tables have captions

Common Issues & Fixes

<!-- Issue: Button not announcing purpose -->

<button><svg>...</svg></button>

<!-- Fix -->

<button aria-label="Close dialog"><svg aria-hidden="true">...</svg></button>

<!-- Issue: Dynamic content not announced -->

<div id="results">New results loaded</div>

<!-- Fix -->

<div id="results" role="status" aria-live="polite">New results loaded</div>

<!-- Issue: Form error not read -->

<input type="email" />

<span class="error">Invalid email</span>

<!-- Fix -->

<input type="email" aria-invalid="true" aria-describedby="email-error" />

<span id="email-error" role="alert">Invalid email</span>

NVDA (Windows)

Setup

Download: nvaccess.org

Start: Ctrl + Alt + N

Stop: Insert + Q

Essential Commands

Navigation:

Insert = NVDA modifier

Down Arrow         Next line

Up Arrow           Previous line

Tab                Next focusable

Shift + Tab        Previous focusable

Reading:

NVDA + Down Arrow  Say all

Ctrl               Stop speech

NVDA + Up Arrow    Current line

Headings:

H                  Next heading

Shift + H          Previous heading

1-6                Heading level 1-6

Forms:

F                  Next form field

B                  Next button

E                  Next edit field

X                  Next checkbox

C                  Next combo box

Links:

K                  Next link

U                  Next unvisited link

V                  Next visited link

Landmarks:

D                  Next landmark

Shift + D          Previous landmark

Tables:

T                  Next table

Ctrl + Alt + Arrows Navigate cells

Elements List (NVDA + F7):

Shows all links, headings, form fields, landmarks

Browse vs Focus Mode

NVDA automatically switches modes:

- Browse Mode: Arrow keys navigate content

- Focus Mode: Arrow keys control interactive elements

Manual switch: NVDA + Space

Watch for:

- "Browse mode" announcement when navigating

- "Focus mode" when entering form fields

- Application role forces forms mode

Testing Script

## NVDA Test Script

### Initial Load

1. Navigate to page

2. Let page finish loading

3. Press Insert + Down to read all

4. Note: Page title, main content identified?

### Landmark Navigation

1. Press D repeatedly

2. Check: All main areas reachable?

3. Check: Landmarks properly labeled?

### Heading Navigation

1. Press Insert + F7 → Headings

2. Check: Logical heading structure?

3. Press H to navigate headings

4. Check: All sections discoverable?

### Form Testing

1. Press F to find first form field

2. Check: Label read?

3. Fill in invalid data

4. Submit form

5. Check: Errors announced?

6. Check: Focus moved to error?

### Interactive Elements

1. Tab through all interactive elements

2. Check: Each announces role and state

3. Activate buttons with Enter/Space

4. Check: Result announced?

### Dynamic Content

1. Trigger content update

2. Check: Change announced?

3. Open modal

4. Check: Focus trapped?

5. Close modal

6. Check: Focus returns?

JAWS (Windows)

Essential Commands

Start: Desktop shortcut or Ctrl + Alt + J

Virtual Cursor: Auto-enabled in browsers

Navigation:

Arrow keys         Navigate content

Tab                Next focusable

Insert + Down      Read all

Ctrl               Stop speech

Quick Keys:

H                  Next heading

T                  Next table

F                  Next form field

B                  Next button

G                  Next graphic

L                  Next list

;                  Next landmark

Forms Mode:

Enter              Enter forms mode

Numpad +           Exit forms mode

F5                 List form fields

Lists:

Insert + F7        Link list

Insert + F6        Heading list

Insert + F5        Form field list

Tables:

Ctrl + Alt + Arrows Table navigation

TalkBack (Android)

Setup

Enable: Settings → Accessibility → TalkBack

Toggle: Hold both volume buttons 3 seconds

Gestures

Explore: Drag finger across screen

Next: Swipe right

Previous: Swipe left

Activate: Double tap

Scroll: Two finger swipe

Reading Controls (swipe up then right):

- Headings

- Links

- Controls

- Characters

- Words

- Lines

- Paragraphs

Common Test Scenarios

1. Modal Dialog

<!-- Accessible modal structure -->

<div

  role="dialog"

  aria-modal="true"

  aria-labelledby="dialog-title"

  aria-describedby="dialog-desc"

>

  <h2 id="dialog-title">Confirm Delete</h2>

  <p id="dialog-desc">This action cannot be undone.</p>

  <button>Cancel</button>

  <button>Delete</button>

</div>

// Focus management

function openModal(modal) {

  // Store last focused element

  lastFocus = document.activeElement;

  // Move focus to modal

  modal.querySelector("h2").focus();

  // Trap focus

  modal.addEventListener("keydown", trapFocus);

}

function closeModal(modal) {

  // Return focus

  lastFocus.focus();

}

function trapFocus(e) {

  if (e.key === "Tab") {

    const focusable = modal.querySelectorAll(

      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',

    );

    const first = focusable[0];

    const last = focusable[focusable.length - 1];

    if (e.shiftKey && document.activeElement === first) {

      last.focus();

      e.preventDefault();

    } else if (!e.shiftKey && document.activeElement === last) {

      first.focus();

      e.preventDefault();

    }

  }

  if (e.key === "Escape") {

    closeModal(modal);

  }

}

2. Live Regions

<!-- Status messages (polite) -->

<div role="status" aria-live="polite" aria-atomic="true">

  <!-- Content updates will be announced after current speech -->

</div>

<!-- Alerts (assertive) -->

<div role="alert" aria-live="assertive">

  <!-- Content updates interrupt current speech -->

</div>

<!-- Progress updates -->

<div

  role="progressbar"

  aria-valuenow="75"

  aria-valuemin="0"

  aria-valuemax="100"

  aria-label="Upload progress"

></div>

<!-- Log (additions only) -->

<div role="log" aria-live="polite" aria-relevant="additions">

  <!-- New messages announced, removals not -->

</div>

3. Tab Interface

<div role="tablist" aria-label="Product information">

  <button role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">

    Description

  </button>

  <button

    role="tab"

    id="tab-2"

    aria-selected="false"

    aria-controls="panel-2"

    tabindex="-1"

  >

    Reviews

  </button>

</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">

  Product description content...

</div>

<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>

  Reviews content...

</div>

// Tab keyboard navigation

tablist.addEventListener("keydown", (e) => {

  const tabs = [...tablist.querySelectorAll('[role="tab"]')];

  const index = tabs.indexOf(document.activeElement);

  let newIndex;

  switch (e.key) {

    case "ArrowRight":

      newIndex = (index + 1) % tabs.length;

      break;

    case "ArrowLeft":

      newIndex = (index - 1 + tabs.length) % tabs.length;

      break;

    case "Home":

      newIndex = 0;

      break;

    case "End":

      newIndex = tabs.length - 1;

      break;

    default:

      return;

  }

  tabs[newIndex].focus();

  activateTab(tabs[newIndex]);

  e.preventDefault();

});

Debugging Tips

// Log what screen reader sees

function logAccessibleName(element) {

  const computed = window.getComputedStyle(element);

  console.log({

    role: element.getAttribute("role") || element.tagName,

    name:

      element.getAttribute("aria-label") ||

      element.getAttribute("aria-labelledby") ||

      element.textContent,

    state: {

      expanded: element.getAttribute("aria-expanded"),

      selected: element.getAttribute("aria-selected"),

      checked: element.getAttribute("aria-checked"),

      disabled: element.disabled,

    },

    visible: computed.display !== "none" && computed.visibility !== "hidden",

  });

}

Best Practices

Do's

• Test with actual screen readers - Not just simulators

• Use semantic HTML first - ARIA is supplemental

• Test in browse and focus modes - Different experiences

• Verify focus management - Especially for SPAs

• Test keyboard only first - Foundation for SR testing

Don'ts

• Don't assume one SR is enough - Test multiple

• Don't ignore mobile - Growing user base

• Don't test only happy path - Test error states

• Don't skip dynamic content - Most common issues

• Don't rely on visual testing - Different experience