Accessible Mobile Scott WilliamsOffice of Institutional Equityswims@umich.edu@swimsy

Slideshare

This preso is on SlideShare: http://www.slideshare.net/swimsy

stuffthathappens.com by Eric Burke

I heart mobile

As an accessibility advocate, mobile is my best friend

Efficient mobile design dovetails with accessible design

Don’t make a separate mobile site—the reincarnation of the text-only site

Implement Universal Design with progressive enhancement

What framework can we use for mobile accessibility?

Web Content Accessibility Guidelines (WCAG 2.0): http://umich.edu/webaccess/best/quickguide.html

Mobile Web Best Practices (MWBP): http://www.w3.org/TR/mobile-bp/

Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG): http://www.w3.org/TR/mwbp-wcag/

WCAG 2.0

WCAG 2.0 is technology-agnostic, so it applies to mobile apps and to websites

WCAG 2.0 is principle-based (POUR): Perceivable Operable Understandable Robust

Barriers to perception

Information conveyed solely with color or sound (beeps)

Large pages or large images (peephole problem)

Multimedia with no captions or transcripts

Non-text objects (images, sound, video, form elements) with no text alternative

Content formatted using tables or CSS, and reading order not correct when linearized (for example when CSS or tables not rendered)

Barriers to operation

Mouse required for interaction and navigation

Scripting required to operate content

Special plugin required

Text input

Missing or inappropriate page title

Inconsistency between focus (tab) order and logical document content sequence

Non-descriptive link labels

Barriers to understanding

Long words, long and complex sentences, jargon, U-Speak

Spawning new windows without warning user

Blinking, moving, scrolling or auto-updating content

Automatically playing audio

Barriers to robustness

Invalid or unsupported markup

Scripting required to generate content

Best practices for mobile accessibility

Navigation

Allow URL hacking (use index.html files) and keep URL entries short, easy to enter

Provide navigation bar, basic links, on a single line and keep placement consistent

Keep IA as narrow and deep as possible

Make links descriptive

Avoid refreshing, redirection and spawned windows

Page content

Mobile users are usually looking for specific pieces of information, rather than browsing

Mobile users pay for bandwidth; disabled users less likely to have broadband

Avoid lateral or secondary scrolling

Use strong contrast

Use proper mark-up to convey structure

Avoid tables, especially nested

Page content cont’d

No frames

Avoid background images

Use alt attributes and labels

Use percentage and relative measures such as em, ex, bolder, larger and thick

iPad accessibility

VoiceOver screen reader

Zoom (cannot be used with VoiceOver) and large font feature

Mono audio

Captions

Rotor—a way to selectively access page elements

Support for over 30 wireless keyboard Braille displays—out of the box

Braille tables for 25+ international languages

iOS app development

Standard UIKit controls and views accessible by default

UI Accessibility programming interface, which defines a streamlined process for making an iPhone application accessible

Tools that help you implement accessibility in your code and test the accessibility of your application

More info: http://goo.gl/flbJe

VoiceOver gestures

Tap:  Speak item.

Flick right or left:  Select the next or previous item.

Two-finger tap:  Stop speaking the current item.

Two-finger flick up:  Read all, from the top of the screen.

Two-finger flick down:  Read all, from the current position.

VoiceOver gestures cont’d

Double-tap:  Activate selected item.

Twist fingers: Activate rotor, select element

Flick up or down:  The effect varies depending on the Rotor Control setting.

Three-finger flick up or down:  Scroll one page at a time.

Three-finger flick right or left:  Go to the next or previous page (for example, on the Home screen or in Safari).

Resources

iPad VoiceOver documentation: http://goo.gl/9vQ7c

Accessibility Programming Guide for iOS: http://goo.gl/flbJe

Android accessibility: http://goo.gl/FzOmp

http://mobileapps.its.umich.edu/dev/resources#accessibility

http://www.w3.org/TR/mwbp-wcag/