Mobile Accessibility

Your website content must also be fully accessible on mobile devices, including the use of mobile screen readers.  

iOS and Android mobile devices both have built in screen readers for vision impaired users. 

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

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

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)