Skip to content

Mobile screen reader testing workshop

Before we begin

Hi, DADG folks!

We'll focus on the two most popular mobile screen readers
We're covering websites, not mobile apps
  • Websites and mobile apps are built with different technologies
  • Navigation and interaction is a bit different on websites and mobile apps
  • Screen readers announce them a little differently
We're just covering how to get started
  • Most of the accessibility problems occur with foundational stuff, the building blocks of the web
  • There’s loads more to explore and learn if you’re interested!
Choosing a page to test

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
Activate control Double tap Double tap
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: on/off, text, cursor

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
  • For a more visible cursor, go to Settings → Accessibility → VoiceOver, Cursor section, toggle Large Cursor on
  • To see a text version of VoiceOver’s speech, go to Settings → Accessibility → VoiceOver, toggle Caption Panel 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
  • For a more visible cursor, go to Settings → Accessibility → TalkBack → TalkBack settings → Change focus indicator → toggle Thick borders on
  • To see a text version of TalkBack’s speech, 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 SR can vary wildly from one person to the next. Like many human things!
  • To find out what an “authentic” experience is like, we can do usability testing with SR 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 with what it sounds like.
  • It’s not “cheating” to look at the screen or to have the voice rate slow!

Once-off set up: Navigate by elements

VoiceOver and TalkBack both have ways to jump around the page, to things like headings, links, and images. VoiceOver has the Rotor and TalkBack has Reading Controls.

We recommend unticking most items, and leaving just some of the most useful ones for testing: Headings, Links, Images, Form Controls, Landmarks, Speech Rate.

VoiceOver on iOS

Set VoiceOver’s Rotor items at Settings → Accessibility → VoiceOver → Rotor → Rotor Items

TalkBack on Android

Set TalkBack’s Reading Control items at Settings → Accessibility → TalkBack → Settings → Edit menus → Customise reading controls

Action iOS Android
Name of tool Rotor Reading controls
Choose next category Two-finger rotation
clockwise
(like twisting a knob)		 Swipe up then down
in one motion
(like an inverted “V”)
Choose previous category Two-finger rotation
anti-clockwise
(like twisting a knob)		 Swipe down then up
in one motion
(like a “V”)
Next item in category swipe down swipe down
Previous item in category swipe up swipe up

To stop navigating by items in a category with up and down, go back to swiping right (or left) to go the next (or previous) piece of content on the page.

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: Typing

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 (recommended for testing)

TalkBack on Android

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

  • Hold finger to select any key, then double-tap
  • Hold finger to select letter key, then lift. Double-tap for other keys.
  • Hold finger to select any key, then lift (recommended for testing)

Practice: forms

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.

Action iOS Android
Next item Swipe right Swipe right
Previous item Swipe left Swipe left
Activate control Double tap Double tap

Discussion: forms

  • 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

Interested in learning about desktop screen readers? Check out these: desktop screen reader testing workshop and desktop screen reader testing workshop for WWAM.