Skip to content

Screen reader testing workshop for WWAM

Hi, folks at the Wellington Web Accessibility Meetup! 👋

Before we begin (5m)

We'll focus on free, laptop, screen readers
  • Laptop/Desktop screen readers
    • On Windows, we recommend NVDA (it’s a bit more mature than Narrator)
    • Narrator comes bundled with Windows
    • VoiceOver (VO) comes bundled with macOS
    • JAWS (Windows only) is also good but expensive
  • For quite a lot of testing, especially simpler components, we usually find the same issues whichever SR we’re testing with
    • The jump from testing with zero screen readers to one is much bigger than the jump from one to two (or three).
  • No mobile testing today (VO on iOS, TalkBack on Android)
    • Laptops a bit better to huddle around in a group
    • Tricky to do both since they’re so different
We're just covering getting started
  • This session is short, so it can only be a taste test
  • Many of the problems occur with the building blocks of the web (headings, images, links, and buttons) so there’s value in testing there
  • There’s loads more to explore and learn if you’re interested! Including: changing the voice, the speech rate, the verbosity, and more.
Test a fairly familiar page
  • Something you use often
  • Something from work!
  • Google your favourite fruit or animal (hint: it should be capybara), then follow one of the search results
  • Use some of the WebAIM practice pages: look for “examples and practice” links on Using NVDA to Evaluate Web Accessibility
Use popular browser-and-SR combinations

Although you can use any browser, these generally give best results:

  • NVDA with Firefox
  • Narrator with Edge (the OS defaults)
  • VoiceOver with Safari (the OS defaults).
Do some gentle group discussion
  • After each section, we’ll go around the room and ask each group to share a few sentences about how they went
  • Nothing formal, no need to stand up or prepare anything
  • So that we share the love around the room a bit

Agenda

Intro: What does good sound like? (5m)

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 accordion, the text in a text field

Groupings and landmarks are announced

For example: a group of radio buttons; the main navigation.

Demo: on/off, next/previous, shh! (5m)

  • Mute your sound, or press Ctrl to pause the speech.
  • Or, turn it off entirely!
Action NVDA Narrator VoiceOver
Start screen reader Ctrl +
Alt +
N		 Windows +
Ctrl +
Enter		 Cmd +
F5
Stop speech Ctrl (or Mute!) Ctrl (or Mute!) Ctrl (or Mute!)
Next item ↓ ↓ → (Quick Nav)
Previous item ↑ ↑ ← (Quick Nav)
Turn off screen reader Caps Lock +
Q		 Windows +
Ctrl +
Enter		 Cmd +
F5

Once-off set up (5m)

There are a few things we can do to make testing easier. You will thank yourself later!

With NVDA on

  • Update the NVDA key. Preferences > Settings, Keyboard, Select NVDA Modifier Key(s). Set Caps Lock as the NVDA key.
  • Turn on Highlighting. Preferences > Vision, check Enable Highlighting.
  • Turn on Speech Viewer. Tools > Speech Viewer: Open the Speech Viewer.

With Narrator on

Show the speech viewer (patchy!). Caps Lock + Alt + x (Live Transcription)

VoiceOver

  • Make sure the keyboard works as expected.
    • System Settings > Keyboard item, toggle Keyboard navigation on
    • Safari > Settings, Advanced tab > Accessibility item, check “Press Tab to highlight each item on a web page”
  • Turn on VO Quick Nav. VoiceOver Utility > Commands, Quick Nav (QN), check Arrow-key Quick Nav and check Single-key Quick Nav. (This makes VO behave more like other screen readers by letting us omit VO keys (Ctrl + Opt) or VO keys + Cmd in almost all cases)
  • Turn on the caption panel. VoiceOver Utility > Visuals: Show caption panel.

Practice: on/off, next/previous, shh! (5m)

Now you try!

Discussion: on/off, next/previous, shh! (10m)

We’ll do a quick go around the room. Pick one or two of these and give us a few sentences. If you’re watching this online, throw your answers in the chat!

  • How was that?
  • Where did you get stuck? (and how did you get unstuck?!)
  • What was unexpected?

Theory: we’re testers, not users (5m)

Don't worry about trying to have an "authentic" experience. That's not really possible!
  • If you don’t use a screen reader (SR) every day, your experience won’t be the same as someone who does.
  • How people use their screen reader can vary wildly from one person to the next. Like many human things!
  • 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.
  • It’s not “cheating” to use your mouse, to have the voice rate slow, or to avoid the screen curtain!
Action NVDA Narrator VoiceOver (QN)
Next heading h h h
Next heading at level 1-6 1-6 1-6 1-6
Next image (graphic) g g g
Next link k k l
Next landmark d d Not available
Previous [thing] Shift +
[thing key]		 Shift +
[thing key]		 Shift +
[thing key]

Discussion: headings, images, links! (10m)

We’ll do a quick go around the room. Pick one or two of these and give us a few sentences. If you’re watching this online, throw your answers in the chat!

  • How was navigating around with the shortcuts?
  • How are the headings on the page? Good structure? Should be a heading / shouldn’t be a heading bits of text?
  • How were the text alternatives?
  • Any “Click here” or “Read more” or other links with confusing link text?

Theory: the two modes of SRs (5m)

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 Caps Lock +
Space Bar		 Caps Lock +
Space Bar		 Not available

Practice: form and function (15m)

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

Remember our “What does good sound like?” from earlier:

  • Names and roles are announced
  • States, properties, and values are announced
  • Groupings and landmarks are announced

A new one for here: help text and error text is announced when a field gets focus.

Action NVDA Narrator VoiceOver (QN)
Next interactive element Tab Tab Tab
Next form element f f j
Next text field e e Not available
Next button b b b
Previous [thing] Shift +
[thing key]		 Shift +
[thing key]		 Shift +
[thing key]

Aside: listing things (5m)

NVDA and VO both let you list stuff: all the links, buttons, headings, and so on. In usability testing we don’t tend to see people using these often. These lists can be helpful to us testers though!

Action NVDA Narrator VoiceOver (Rotor)
List element Caps Lock +
F7		 Not available VO keys
( Ctrl +
Opt ) +
u
List all landmarks Available in Elements list Caps Lock +
F5		 Available in Rotor
List all headings Available in Elements list Caps Lock +
F6		 Available in Rotor
List all links Available in Elements list Caps Lock +
F7		 Available in Rotor

Discussion: form and function (10m)

We’ll do a quick go around the room. Pick one or two of these and give us a few sentences. If you’re watching this online, throw your answers in the chat!

  • What went well?
  • What went weird?
  • What did you learn?
And the big question: what will you do next?

Get help! (5m)