Mobile Accessibility
Table of Contents
Overview
Your website content must also be fully accessible on mobile devices, including users who rely on using a mobile screen reader.
iOS and Android mobile devices both have built in screen readers.
Mobile screen reader users use swiping and tapping gestures to navigate websites on mobile devices.
General Guidelines
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 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.
2 Provide sufficient color contrast
Extra attention must be paid to mobile devices when it comes to color contrast.
Mobile devices are more likely to be used outdoors, where glare from the sun could impact ability to see the screen.
Text legibility should be preserved by an adequate contrast between the font color and the background.
For WCAG 2.1 AA compliance, text should have a color contrast ratio of at least 4.5:1 (larger text at least 3:1).
Allowing different contrast ratios for larger text is useful because wider character strokes are easier to read at a lower contrast than narrower character strokes.
3 Make it easy for users to enter data
Reduce the amount of text entry required by providing select menus, radio buttons, or check boxes, or by auto filling 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.
5. Provide users with the ability to display content in their preferred orientation
Ensure that content displays in the orientation (portrait or landscape) preferred by the user, including on a mobile device.
6. Provide users with the ability to control text size
Allow the user to control the text size on mobile devices with small screens.
7. Steer away from using PDF documents
Unlike web pages, PDF documents are not responsive and do not adjust to your screen size, such as on a mobile device. This forces the user to have to zoom in and the swipe left to right /right to left in order to read the content.
8. Keyboard related guidelines for touchscreen devices
Allow mobile devices to be operated by external physical keyboards or alternative on-screen keyboards.
Ensure that content accessed through a mobile device does not "trap" keyboard focus within subsections of content.
Ensure that when mobile keyboard users or mobile screen reader users navigate sequentially through content on a mobile device, they encounter information in an order that is consistent with the meaning of the content.
Help mobile keyboard users and mobile screen reader users know which element has the keyboard focus.
9. Navigation and consistency
Ensure that navigational mechanisms on a mobile screen, that are repeated on multiple web pages within a set of web pages, occur in the same relative order each time they are repeated.
Ensure that components viewed on a mobile device, that have the same functionality within a set of web pages, are identified consistently.
10. Links and grouping of operable elements that perform the same action
When multiple elements perform the same action or go to the same destination (e.g. link icon with link text), these should be contained within the same actionable element. This increases the touch target size for all users. It also reduces the number of redundant focus targets, which benefits people using screen readers and keyboard/switch control.
Help users understand the purpose of each link when viewed on a mobile device.
Help users understand the purpose of each link from the link text alone when viewed on a mobile device.
11. Labels and instructions
Ensure that labels or instructions are provided to mobile users and mobile screen reader users when content requires user input.
12. Operating touch screens
Provide users with the ability to operate touchscreens with one finger and reduced gestures.
13 Provide Running Headers and Footers in PDF Documents
Help users locate themselves in a document by providing running headers and footers via pagination artifacts. Running headers and footers help make content easier to use and understandable by providing repeated information in a consistent and predictable way.
Testing with Mobile Screen Readers
Mobile screen reader users use swiping and tapping gestures to navigate websites on mobile devices.
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 the next element |
Swipe-left | Move to the previous 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 |