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