Skip to content

Screen reader testing workshop

  • We’ll focus on the free screen readers.
    • Testing with JAWS is fairly similar to testing with NVDA.
    • Narrator comes with Windows and VoiceOver comes with macOS
    • NVDA is a free download, Windows only
  • We’re just covering getting started
    • Most of the problems occur with foundational stuff, the building blocks of the web.
    • There’s loads more to explore and learn if you’re interested!
  • We’ll be testing on Research insight: accessibility of images

If you just want the keyboard shortcuts, go to “Get help!” at the bottom of the page.

Agenda

Depending on how we go with time, we may jump to “Get help!”, which is a list of resources.

1. Dive right in (practical 🫱)

Be prepared to make it hush!

  • Mute your sound, or press Ctrl to pause the speech.
  • Or, turn it off entirely!
Action NVDA Narrator VoiceOver
Turn off screen reader `NVDA key` (Insert or Caps Lock) + Q Windows + Ctrl + Enter Cmd + F5

We’ll come back to NVDA key later!

Start the screen reader

Search for it, click the logo, or use a keyboard shortcut.

Action NVDA Narrator VoiceOver
Start screen reader Ctrl + Alt + N Windows + Ctrl + Enter Cmd + F5

Although you can use any browser, we generally suggest using these combinations for best results:

  • NVDA with Firefox
  • Narrator with Edge
  • VoiceOver with Safari.

Move around the page

Action NVDA Narrator VoiceOver
Next item ↓ ↓ ↓
Previous item ↑ ↑ ↑
Next interactive item Tab Tab Tab
Previous interactive item Shift + Tab Shift + Tab Shift + Tab

If you get stuck, try:

  • going backwards
  • pressing Tab a few times
  • refreshing the page!

Briefly discuss

How was that? 🙃

2. Think about it (theory 🧠)

Testers, not users

  • Don’t worry about trying to have an “authentic” experience. That’s not really possible!
    • If you don’t use a SR (screen reader) every day, your experience won’t be the same as someone who does.
    • Your familiarity with the SR and the way of browsing is very different.
    • You can choose not to use it, some everyday users can’t.
    • To find out about an authentic experience, we can do usability testing with everyday users!
  • What we’re trying to do is to find barriers that someone who uses a SR every day might encounter.
    • That we can do, and we can compare what it looks like and what it sounds like.

The two modes of screen readers

Screen readers have two modes: Browse mode (which Narrator calls Scan Mode) and Forms mode. One way to think about the difference is the keyboard interactions for desktop screen readers.

  • In Browse mode, keystrokes perform reading and navigation actions by the screen reader.
  • In Forms mode, keystrokes perform data entry actions by the browser.

Screen readers generally change modes automatically. For example: when tabbing into a form field. You can also change modes manually.

Action NVDA Narrator VoiceOver
Change mode `NVDA key` + Space Bar Caps Lock + Space Bar + Enter Not available

What does good sound like?

Broadly speaking: it should sound the same as it looks.

  • Names and roles are announced
    • For example: “button, save”; “contact us, link”.
  • States, properties, and values are announced
    • For example: an expanded state on an accordions, the text in a text field
  • Groupings and landmarks are announced
    • For example: a group of radio buttons; the main navigation.

Variations between SRs

Some screen readers announce ‘button, save’ and some announce ‘save, button’.

Different screen reader and browser combinations may announce the same thing slightly differently. That’s fine, and expected!

Briefly check that no information is missing across these variations. The order doesn’t matter, only the content of the announcement.

3. Set it up (practical 🫱)

Okay, let’s make our testing slightly easier by updating a shortcut key and turning on highlighting.

NVDA only: NVDA key and Turn on highlighting

  • Set a new NVDA key. Some people prefer Caps Lock as the NVDA key. In the menus, go to Tools > Speech Viewer (by using your mouse or NVDA key` + N).
  • Turn on Highlighting. In the menus, go to Preferences > Vision, and check Enable Highlighting. This lets you see where NVDA’s cursor is.

Speech viewer

NVDA and VoiceOver both let you view a text version of the speech. It doesn’t always match what’s announced, though, so be wary of relying on it.

Action NVDA Narrator VoiceOver
Turn on the speech viewer Tools > Speech Viewer: Open the Speech Viewer Not available VoiceOver Utility > Visuals: Show caption panel

4. Set if off (practical 🫱)

Quick aside for VoiceOver:

Interact with (go into/out of) objects (like iframes, menus, application regions, etc.) : VO + Shift + ↓ / ↑

Test the headings

Action NVDA Narrator VoiceOver
Next heading h h VO + Cmd + h
Previous heading Shift + h Shift + h VO + Cmd + Shift + h
Next heading at level 1-6 1-6 1-6 Not available

Trying moving down the page after jumping to a heading!

Action NVDA Narrator VoiceOver
Start reading from here `NVDA key` + ↓ Caps Lock + ↓ VO + a

Test the images

Action NVDA Narrator VoiceOver
Next image (graphic) g Not available VO + Cmd + g
Previous image (graphic) Shift + g Not available VO + Cmd + Shift + g

Test the title

Action NVDA Narrator VoiceOver
Announce title `NVDA key` + t Caps Lock + w Not available

5. Share it out (theory 🧠)

  • What went well?
  • What went weird?
  • What did you learn?

6. Something went wrong (practical 🫱)

Test some interactive elements, especially help text and errors. Tab through the page, or jump to the next form element.

Action NVDA Narrator VoiceOver
Next form element f f VO + Cmd + j

If you get stuck, try:

  • going backwards
  • pressing Tab a few times
  • switching modes
  • refreshing the page!

7. Get help!