15% off all orders with minimum $50!

Mobile Screen Reader Testing

With the rise of mobile-first computing, let's add accessibility testing to our workflows. We'll explore mobile screen readers, common gestures, and how to test on real-world devices and simulators.

Testing web sites and native apps on mobile devices is just as important as testing on a desktop. Perhaps even more critical now since so many people access the web via handheld device only.

Whether building an experience for the browser, a native application, or both via React Native, knowing how to test your app is a critical piece of the project lifecycle.

Let's review how to test on the two major platforms; iOS and Android.

Before you start

It's important to understand the basics of using a mobile screen reader before you enable one for the first time. Otherwise, you may get stuck and not know how to return.

Both iOS and Android feature a similar base set of gestures when it comes to navigation; finding and activating a control on the screen. There are two basic methods:

  1. Explore: Place a single finger anywhere on the screen and drag it around in order to discover content. This will cause the screen reader to announce the item which is currently under your finger. You are free to explore in any direction.
  2. Swipe: Use a single finger and swipe right, anywhere on the screen. This allows the screen reader to locate and announce content items on the screen from top-top-bottom, left-to-right sequence. Swiping left will find items in the reverse order.

Once a piece of content is in screen reader focus, double tap anywhere on the screen to activate .

iOS

Every iOS (and iPadOS) device comes with a screen reader called VoiceOver. If you're testing in a mobile browser, the typical pairing would be with Safari .

Starting up

To start VoiceOver, go to Settings → Accessibility → VoiceOver. Refer to the "Before you start" section on mobile screen reader basics.

Screenshot of VoiceOver settings in iOS. Includes the main VoiceOver switch control, speaking rate slider, and other settings buttons.

In order to save time while testing, the shortcut for turning VoiceOver on and off is to triple-press the iPhone/iPad Home button . To activate this feature, go to Settings → General → Accessibility → Accessibility Shortcut.

Common gestures

Various gestures are available while VoiceOver is enabled. The following table outlines gestures available, ordered from single to multi-finger requirements.

VoiceOver Gestures
Action Gesture
Select/read the item Touch/single tap
Activate the currently selected item Double-tap
Move to the next item Swipe-right
Move to the previous item Swipe-left
Drag the currently selected item Double-tap + long-press
Pause/resume reading Two-finger tap
Read all items from the top of the screen Two-finger swipe up
Read all items from the current position Two-finger swipe down
Select/deselect text Two-finger pinch open/closed
Scroll up/down Three-finger swipe up/down
Navigate to the next/previous page Three-finger swipe left/right
Select the first or last item on the screen Four-finger tap at the top or bottom of the screen

VoiceOver Rotor

If you're familiar with VoiceOver on macOS, you'll likely have used the Rotor to navigate via specific elements such as headings or links. The same concept exists for mobile devices, though the execution is a little different.

To use the Rotor:

  1. Use a two fingers twist gesture on the screen. Each option will be read aloud as you twist your fingers.
  2. Once you've located the desired option:
    • Release your fingers to select.
    • If it is an option you can iterate the value of (such as Volume or Speaking Rate), swipe up or down to increase/decrease the value of the selected item.

    Note: The options available under the Rotor are context-sensitive; not all options will be available all of the time.

    Testing with VoiceOver in a simulator

    If your native app is running in the Xcode simulator, there are three ways you can go about testing the user interface for accessibility issues.

    1. Accessibility inspector

    The Xcode Accessibility Inspector is a tool much like a web inspector found in a modern browser. Use it to inspect pieces of the app UI to test for things like a component label and role , or state .

    Open the accessibility inspector by going to Xcode → Open Developer Tool → Accessibility Inspector. In the Accessibility Inspector window, click the cross-hair icon (point inspection button ) then hover over the UI to be tested.

    Screenshot of Xcode accessibility inspector. The point inspection button is highlighted.

    You can gather useful information from the Basic portion of the window. Review data in the Advanced portion for more technical details, such as the current component state.

    2. macOS VoiceOver

    While VoiceOver is not available directly in the Xcode simulator, it is possible to run VoiceOver from macOS to test your app.

    To do this, set keyboard focus on the simulator window then enable VoiceOver. From here you'll be able to use the Virtual Cursor to move between items on the screen. In order to interact with clickable items in the app, use the VO + Space key.

    3. Loading the app onto a device

    The last option to test is to load the app onto your own physical device. With this, you should be able to use VoiceOver natively and conduct other tests, such as using the Rotor.

    1. Plug in your iPhone or iPad into your macOS based computer.
    2. In Xcode, activate the Run Destination button.
    3. Select your device at the top of the device menu.

    Gestures

    You can pinch-zoom/swipe in the iOS simulator by holding the Opt key and clicking + dragging your mouse cursor.

    Android

    Most Android devices come with a screen reader called TalkBack (if not, you can install it from the Android Accessibility Suite.) If you're testing in a mobile browser, the typical pairing would be with Chrome .

    Starting up

    Starting TalkBack may differ slightly depending on the Android phone manufacturer. For Google Pixel based phones, go to Settings → Accessibility → TalkBack. Refer to the "Before you start" section on mobile screen reader basics.

    Screenshot of TalkBack settings in Android. Includes an illustration of a phone with a speech bubble and the main TalkBack switch control.

    In order to save time while testing, the shortcut for turning TalkBack on and off is to press and hold both volume buttons . To activate this feature, go to Settings → Accessibility → TalkBack → TalkBack Shortcut.

    Common gestures

    Various gestures are available while TalkBack is enabled. The following table outlines gestures available, ordered from single to multi-finger requirements, including swipe gestures.

    TalkBack Gestures
    Action Gesture
    Select/read the item Touch/single tap
    Activate the currently selected item Double-tap
    Move to the next item Swipe-right
    Move to the previous item Swipe-left
    Scroll up/down Two-finger slide up/down
    Jump to the first item on the screen Slide up-down
    Jump to the last item on the screen Slide down-up
    Scroll up one screen Slide left-right
    Scroll down one screen Slide right-left
    Return to the home screen Slide up-left
    Activate the back button/close app Slide down-left

    Testing with TalkBack in an emulator

    If your native app is running in the Android emulator, you can run TalkBack screen reader for testing. However, TalkBack is not installed by default.

    Install TalkBack

    You can install TalkBack in one of two ways:

    1. Login to your Google account on the emulator and install TalkBack from Google Play, or
    2. Download the Talkback apk file from: google-talkback.en.uptodown.com/android

    Once you have TalkBack installed, enable it in the accessibility settings. When running, use the app switcher to move between the settings app and your app.

    Gestures

    You can pinch-zoom/swipe in the Android emulator by holding the Cmd key and clicking + dragging your mouse cursor.

    Content discovery can be completed in one of two ways:

    1. Use the mouse pointer to click and hold (long-press) and mouse the pointer around the screen. This is the same as using your finger on an actual device.
    2. Use the mouse to "swipe" gesture through the content (I found this to be cumbersome/difficult/awkward than on an actual device and may lead to unexpected results.)

    Check out "Testing with Screen Readers" for tips on how to test with desktop screen readers!

    Resources