Skip to content

Mobile screen reader testing workshop

Before we begin

We'll focus on the two most popular mobile screen readers
  • VoiceOver on iOS, and TalkBack on Android.
  • There are other Android ones, but TalkBack is the most popular.
We're covering web sites, not apps
  • Web sites and apps announce things a little differently, particularly headings
  • Some apps have web views in them!
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!
Ideally, test a fairly familiar page

If you just want the 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.

Intro: 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 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!

  • Mute your sound, or two-finger tap to pause the speech.
  • Or, turn it off entirely!
Action iOS Android
Start screen reader triple-click side button hold both volume keys
for 3 seconds
Stop speech two-finger tap two-finger tap
Next item Swipe right Swipe right
Previous item Swipe left Swipe left
Navigate by touch Drag one finger Drag one finger
Start reading from here two-finger swipe down two-finger triple-tap
Turn off screen reader triple-click side button hold both volume keys
for 3 seconds

Once-off set up

There are a few things we can do to make testing easier: set a shortcut and show the speech on screen. You will thank yourself later!

(We’ll do some more short set up stuff later, as we need it)

VoiceOver on iOS

  • Set the Accessibility Shortcut at Settings → Accessibility → General section > Accessibility Shortcut → select VoiceOver
    • Then triple-click side button to start/stop VoiceOver
  • To show the VoiceOver’s speech on screen, go to Settings → Accessibility → VoiceOver, toggle Caption Panel on
  • For a more visible cursor, go to Settings → Accessibility → VoiceOver, Cursor section, toggle Large Cursor on

TalkBack on Android

  • Set the Shortcut service at Settings → Accessibility → Volume key shortcut. Select Use service and choose TalkBack.
    • Then hold both volume keys for 3 seconds to start/stop TalkBack
  • To show TalkBack’s speech on screen, go to Settings → Accessibility → TalkBack → TalkBack settings → toggle Display speech output

Practice: on/off, next/previous, shh!

Now you try!

Discussion: on/off, next/previous, shh!

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

Theory: we’re testers, not users

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 look at the screen or to have the voice rate slow!

Once-off set up, part 2

VoiceOver and TalkBack both have ways to jump around the page, to things like headings, links, and buttons. VoiceOver has the Rotor (where you “twist” your fingers in the screen) and TalkBack has Reading Controls (where swipe up then down).

We recommend unticking most items, and leaving just a few. For example: Headings, Links, Form Controls, Landmarks

  • Set VoiceOver’s Rotor items at Settings → Accessibility → VoiceOver → Rotor → Rotor Items.
  • Set TalkBack’s Reading Control items at Settings → Accessibility → TalkBack → Settings → Edit menus → Customise reading controls
Action iOS Android
Choose item (what) Rotor Reading controls
Choose item (how) Two-finger rotation swipe up then down
(or down then up)
Next item swipe down swipe down
Previous item swipe up swipe up

After swiping down or up, go back to swiping right (or left) to continue from where you are.

Discussion: headings, images, links!

  • 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?

Once-off set up, part 3

VoiceOver and TalkBack both have typing options that let you choose how to type: double tap or lift.

VoiceOver on iOS

Set VoiceOver’s typing style at Settings → Accessibility → VoiceOver → Typing → Typing Style.

  • Standard Typing: navigate by touch, double tap to type
  • Touch Typing: navigate by touch, lift to type
  • Direct Touch Typing: tap to type

TalkBack on Android

Set TalkBack’s typing style items at Settings → Accessibility → TalkBack → Settings → Typing section, On-screen keyboard → Typing preference

Practice: form and function

Test some interactive elements, especially help text and errors. On desktop, you can Tab to the next interactive element. On mobile, it’s just swipes! But/and you can use the Rotor/Reading Controls.

Discussion: form and function

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

Get help!

VoiceOver on iOS

TalkBack on Android

Testing and demos

See also

Two versions of a desktop version of this workshop: Screen reader testing workshop and Screen reader testing workshop for WWAM.