(DRAFT PAGE 2) WAI guidance and techniques for mobile accessibility

WCAG 2.0

Many WCAG 2.0 techniques apply to web and non-web mobile content and applications.

[[[Note from Kim: I wanted to put the customizable quick reference here with advice to click the mobile tag, but there is no mobile tag. This might be good to keep in mind for future version of the customizable quick reference.]]]

Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile maps out in detail how many of the W3C/WAI Guidelines apply to mobile.

UAAG 2.0 Guidelines

The UAAG 2.0 guidelines apply to mobile.

Many of the guidelines include mobile examples

What to bear in mind when using general accessibility resources for mobile

Mobile devices are used differently because they have small screens, are very portable, and the primary means of input is often touch.

1. Limited screen size

Although mobile devices have exceptional resolution, small screen sizes limit how much information can be viewed at once, especially for people who use magnification.

Tips:

Provide clear information architecture and navigation
Minimize distractions
Provide perceptible feedback
Use responsive design that uses CSS stylesheets to adjust layout depending on screen width
Make sure text reflows to avoid horizontal scrolling
Provide a reasonable default size for content and touch controls
Adapt the length of link text to screen width
In portrait layout, position form fields below rather than beside labels

Details:

Small screen size

2. Touch and gestural input

The exceptional resolution of mobile screen devices means that interactive elements can be shown in a small space. But these elements must be accessible by touch.

Tips:

Make touch targets large enough to be accessible by touch (without magnification)
Make touch targets look clickable/touchable
Use inactive space to separate touch targets that are close together
Position and group touch targets so they are easy to reach on a mobile device
Focus target on touch, activate target on release (mouseup or touchend)
Make gestures easy to carry out

Details:

3. Keyboards and virtual keyboards

Although the primary means of input for mobile devices is touch, mobile devices also include on-screen keyboards and can connect to external input devices including keyboards. Some users rely on keyboard input.

Tips:

Support keyboard input as an alternative to touch

Details:

Keyboard control for touchscreen devices

4. Speech

Mobile devices commonly support speech input via a speech button on the keyboard and intelligent agents like Siri. Some users rely on speech input.

Tips:

Support speech input as an alternative to touch
If you offer keyboard users single character shortcuts, make sure users can turn off or remap these shortcuts so they can avoid accidentally activating many shortcuts at once with spoken words

5. Device sensors

Mobile devices commonly support control options triggered by device manipulation gestures. Some users cannot carry out these gestures.

Tips:

Provide touch and keyboard operable alternative control options for device manipulation gestures

Details:

Device manipulation gestures

6. Layout and screen orientation

Most sites today use responsive design to adjust layout based on screen size. People using mobile devices must scroll more. People with low vision who use magnification may be seeing the mobile version on the desktop. Some users may not able to easily change orientation.

Tips:

Don’t assume that a given screen width is only for a particular device. Make sure all functions are available four screens of all sizes, and make sure that layout is relatively consistent in all sizes and for both portrait and landscape mode.
Position important elements in the first part of the page to limit excessive scrolling
Warn users when moving between portrait and landscape mode

Details:

7. Platform accessibility conventions

Mobile devices include accessibility features like zoom, large fonts, and captions. It’s important that a website not interfere with the operation of this platform-wide assistive technology

Tips:

Honor platform accessibility settings including zoom, fonts and captions

Details

Support the characteristic properties of the platform

Tips for using existing tutorial guidance for mobile

W3C Tutorials for Page Structure, Menus, Images, Tables, Forms and Carousels menus all apply to mobile. Here are some things to keep in mind when applying these advice to mobile.

Page structure

Page structure should be consistent across different screen sizes and orientations. Components may be collapsed or even hidden on smaller screens, but components that show should appear in the same order.

Further resources for Page Structure

Menus

Menu structure should be consistent across screen sizes. Some menu items may be collapsed or even hidden in sub navigation menus, but items that show should appear in the same order. Menus should be accessible by touch and keyboard.

Further resources for Menus

Images

On smaller screens icons often drop text labels. Ensure that icons are readable at that size, understandable without text, and have text descriptions

Tables

On smaller screens, responsive tables often change format. Ensure that the structural relationship is available in all formats. Table headers should be defined. If a table is rendered as multiple tables ARIA should be used. If a table is rendered as a list column and row headers should be available.

Forms

HTML 5 form field controls should be used to automatically show the virtual keyboard. Placing labels above form fields is ideal for mobile layouts. On smaller screens field labels may drop completely. Ensure that fields have text descriptions.

Further resources for Forms

Carousels

On smaller screens make sure carousel text is not too small or cut off from view. Make sure that touch access works well on the small dots that control the slides.

Acknowledgements

Status: [EDITOR’S DRAFT] (PLACEHOLDER] updated PLACEHOLDER
Authors: Kim Patch and Kathy Wahlbin
Editor: Judy Brewer
The Education and Outreach Working Group (EOWG)
[Developed with support from the U.S. Access Board, WCAG TA Project] (https://www.w3.org/WAI/WCAGTA/)