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

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

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)

Minimum Target Size - Make Controls Easy to Activate

Some people with physical impairments cannot click small buttons that are close together.

Ensure targets meet a minimum size or have sufficient spacing around them.

  • Ensuring that touch targets are at least 9 mm high by 9 mm wide.

  • Ensuring that touch targets close to the minimum size are surrounded by a small amount of inactive space.

Ensure that targets can be easily activated without accidentally activating an adjacent target. Users with dexterity limitations and those who have difficulty with fine motor movement find it difficult to accurately activate small targets when there are other targets that are too close.

Providing sufficient size, or sufficient spacing between targets, will reduce the likelihood of accidentally activating the wrong control.

Disabilities addressed by this requirement include hand tremors, spasticity, and quadriplegia. Some people with disabilities use specialized input devices instead of a computer mouse or trackpad.

Typically these types of input device do not provide as much accuracy as mainstream pointing devices. Meeting this requirement also ensures that touchscreen interfaces are easier to use.

Pointer Gestures

Not everyone can perform complex and multi-touch gestures.

Let users operate touch screens with one finger and reduced gestures.

Provide single-point operation for all functions.

Please see more detailed information on how to comply with this guideline.

Pointer Cancellation

Make it easier for users to prevent accidental or erroneous pointer input.

People with various disabilities can inadvertently initiate touch or mouse events with unwanted results.

Make pointer cancellation predictable and consistent.

Reduce accidental activation of controls by mouse or touch.

Make it easier for anyone to recover from something they didn’t mean to do.

General Requirements

For functionality that can be operated using a single pointer, at least one of the following should apply:

1. No Down-Event

The down-event of the pointer is not used to execute any part of the function;

2. Abort or Undo

Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;

3. Up Reversal

The up-event reverses any outcome of the preceding down-event;

4. Essential

Completing the function on the down-event is essential.

Please see more detailed information on how to comply with this guideline.

Screen Size Overview

Content should not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

Users should be able to view website content in any orientation.

Don't lock content to either portrait or landscape presentation.

See more detailed information on how to comply with these requirements.

Page Flow Overview

Content must be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;

  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Please see more detailed information on how to comply with these requirements.

Resizing of Text Overview

With the exception of captions and images of text, text should be able to be resized without assistive technology up to 200 percent without loss of content or functionality.

Paragraph Sizing Overview

There should be no loss of content or functionality when the user adapts paragraph spacing to 2 times the font size, text line height/spacing to 1.5 times the font size, word spacing to .16 times the font size, and letter spacing to .12 times the font size.


WCAG Related Guidelines

WCAG 2.0 Guidelines Related to Mobile Accessibility

1.3.4 Orientation (Level AA)

1.4.10 Reflow (Level AA)

1.4.4 Resize Text (Level AA)

1.4.12 Text Spacing (Level AA)

2.5.1 Pointer Gestures (Level A)

2.5.2 Pointer Cancellation (Level A)