Your website content must also be fully accessible on a mobile devices, including screen reader usersthe use of mobile screen readers.
iOS and Android mobile devices both have built in screen readers for vision impaired users.
How to turn on VoiceOver on iOS
You can turn VoiceOver on by going to “Settings” > “General” > “Accessibility” > “VoiceOver”.
You can also access the VoiceOver tutorial, as well as the VoiceOver settings, from there as well.
How to turn on TalkBack on Android
To turn on TalkBack, go to the “Accessibility” option under “Settings.”
...
Mobile accessibility best practices
Following are some mobile accessibility best practices.
1 Provide easy tap/touch targets
Tap targets within an app should be big enough for people to interact with precision. Touch
Touch targets should be at least 9 mm high by 9 mm wide.Mobile applications should also position interactive elements where they can be easily reached regardless of how the device is held. Create a logical reading/tab order for screen reader users.
2 Provide sufficient color contrast
...
Reduce the amount of text entry required by providing select menus, radio buttons, or check boxes, or by autofilling known information (e.g., date, time, location).
4. Create a logical reading/tap order for screen reader users.
Create a logical reading/tap order for screen reader users.
Place submit buttons for forms, etc, in context of actions performed within the content area
The screen reader will read from top to bottom of the screen.
Testing with mobile screen readers
VoiceOver on iOS
You can turn VoiceOver on by going to “Settings” > “General” > “Accessibility” > “VoiceOver”.
You can also access the VoiceOver tutorial, as well as the VoiceOver settings, from there as well.
VoiceOver/iOS Gestures
Gesture | Action |
|---|---|
Touch/single tap | Select and read the element |
Double-tap | Activate the selected element |
Swipe-right | Move to next the element |
Swipe-left | Move to previous the element |
Swipe up or down | On an adjustable element like a slider, this increments or decrements the value. In text view, this moves the insertion point backwards or forwards. |
Double press: with one finger, perform a double tap. During the second tap, continue to hold your finger against the screen. | Drag the selected item |
Two-finger tap | Pause/resume reading |
Two-finger swipe up | Read all accessible items from the top of the screen |
Two-finger swipe down | Read all accessible items from the current position |
Two-finger pinch open/closed | Select/deselect text |
Three-finger swipe up/down | Scroll screen up/down |
Three-finger swipe left/right | Navigate to the next/previous page |
Three-finger double tap (if zoom is enabled, this becomes a three-finger triple tap) | Toggle speech |
Three-finger triple tap (if zoom is enabled, this becomes a three-finger quadruple tap) | Toggle screen curtain |
Four-finger tap at the top or bottom of the screen | Select the first or last accessible element on the screen |
TalkBack on Android
To turn on TalkBack, go to the “Accessibility” option under “Settings.”
There’s also an option you can enable to toggle TalkBack on and off, along with a lot of other accessibility options.
TalkBack/Android Gestures
Gesture | Action |
|---|---|
Touch/single tap | Read element |
Double-tap | Activate element |
Swipe-right | Move to next element |
Swipe-left | Move to previous element |
Two-finger slide up/down | Scroll |
Triple-tap | Zoom |
Slide up-down | Jump to the first item on the screen |
Slide down-up | Jump to the last item on the screen |
Slide left-right | Scroll up one screen |
Slide right-left | Scroll down one screen |
Slide up-left | Return to the home screen (from anywhere) |
Slide down-left | Activate the back button (browser only), close app (apps only) |
Slide up-right | Opens the local context menu (options depend on where you are) |
Slide down-right | Opens the global context menu (includes TalkBack settings) |