Mobile Screen Reader Testing
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:
- 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.
- 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.
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.
| 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:
- Use a two fingers twist gesture on the screen. Each option will be read aloud as you twist your fingers.
- 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.
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.
- Plug in your iPhone or iPad into your macOS based computer.
- In Xcode, activate the Run Destination button.
- 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.
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.
| 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:
- Login to your Google account on the emulator and install TalkBack from Google Play, or
- Download the Talkback
apkfile 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:
- 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.
- 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!