Jon Gibbins (Dotjay)
Accessibility consultant at DIG Inclusion
Web developer since 2003
Assistive technology since 2002

Shadi Abou-Zahra
W3C Web Accessibility Initiative (WAI)
Activity Lead, WAI International Program Office

• This workshop will:
  • give an overview of the accessibility features available on the major mobile platforms;
  • demonstrate how people with disabilities interact with technologies such as touch screens;
  • introduce some of the accessibility guidelines, specifications, and resources for mobile;
  • suggest strategies and techniques for integrating accessibility into projects on the mobile web and mobile platforms;
  • invite delegate questions in a Q&A session.

• Screen readers
• Magnifiers
• Voice input

Now:

• Current market share favours iOS and Android devices over other vendors
• iOS accessibility features and programming API are most mature
• Android devices have some good accessibility features, improving all the time

1. Explore by touch
   • Drag finger over screen
   • Items under your finger are described by screen reader
   • Tap with a second finger or double tap to open/activate
2. Gesture navigation
   • Swipe right/left moves focus to next/previous content in sequence
   • Items are described by screen reader as focus moves
   • Double tap to open/activate

• VoiceOver
  • Introduced with iPhone 3GS in 2009
• Zoom (system-wide)
  • Three-finger gestures for zoom control/movement
  • Zoom up to 5x
• Pinch zoom
• Large Text / Dynamic Type
• Invert Colors / Black on White

• FaceTime — used by deaf people
• Guided Access
• Assistive Touch
• Speak selection
• Captioned content (QuickTime)
  
  
• Custom vibrations
• LED Flash
• Hearing aid support
  
  
• Mono audio and balance control
• TTY (used by the Deaf)
• iMessage
• Visual Voicemail

New in iOS 7:

• Switch Control
• Handwriting support
• More enhancements:
  • Dynamic Type
  • Larger cursors
  • Customisable styles for captions and subtitles
  • More interface customisations
  • Guided Access improvements
  • Braille support improvements
• iOS 7 Accessibility videos by Luis Perez on YouTube

• TalkBack
  • Bundled since version 4.0 (Ice Cream Sandwich)
  • Explore by touch only on Ice Cream Sandwich
  • Jelly Bean behaves a lot like iOS
  • Download for version 2.2+
• Zoom (system wide)
• Pinch zoom
• Voice input
• Haptic feedback
• Large text

Note: Available features depends on device vendor.

1. Triple click the Home key to activate
2. Dial to open the Rotor
3. Swipe up/down to navigate parts
4. Swipe right/left for next/previous content

1. Triple click the Home key to activate
2. Dial to open the Rotor
3. Swipe up/down to navigate parts
4. Swipe right/left for next/previous content

1. Triple click the Home key to activate
2. Dial to open the Rotor
3. Swipe up/down to navigate parts
4. Swipe right/left for next/previous content

• Small screen
  • iPhone is 1/12 of a typical desktop screen
  • 40-pixel finger is big on small targets
  • Can be hard to reach some parts of the screen
• Small text sizes
  • is like having low vision
• Small input devices
• Eyes-free
  • is like being blind, e.g. in car

• Shared experiences, comparable to temporary disability:
  • in the car (blind)
  • at concerts (hard of hearing)
  • small text (low vision)
  • “fat fingers” (hand tremors)
  • broken bones (crutches)

http://www.w3.org/WAI/mobile/experiences

Technologies and resources:

• Accessibility support in core web technologies (HTML5);
• Accessibility extensions if needed (WAI-ARIA & IndieUI);
• Accessibility guidelines for policies (WCAG, ATAG, UAAG);
• Implementation guidance for the developers (techniques);
• Additional guidance, introductory resources, etc.

The Open Web Platform:

• HTML5, CSS3, DOM, SVG, MathML, and many more;
• Web APIs such as Geolocation, Media Capture, ...;

HTML Accessibility Task Force

Accessible Rich Internet Applications (WAI-ARIA):

• Provides additional markup, especially for dynamic content;
• http://www.w3.org/WAI/intro/aria

Independent User Interface (IndieUI):

• Defines ways for communicating user actions to applications;
• http://www.w3.org/WAI/intro/indieui

Web Content Accessibility Guidelines (WCAG) 2.0:

• Defines accessible web content, regardless of device;
• Addresses many shared experiences with mobile web users;

User Agent Accessibility Guidelines (UAAG) 2.0:

• Defines accessible user agents, including some "apps";
• Guidance includes several Mobile Accessibility Examples;

Techniques for WCAG 2.0:

• Increased development of techniques, especially for HTML5;
• HTML 5 Techniques for WCAG 2.0 Task Force

Mobile Accessibility Task Force:

• Improving guidance throughout WCAG 2.0 and UAAG 2.0;
• Mobile Accessibility Task Force (Mobile A11Y TF)

Extending support for mobile accessibility:

• In the core W3C specifications of the Open Web Platform;
• Accessibility extensions such as WAI-ARIA and IndieUI;
• Guidance and explanations for WCAG 2.0 and UAAG 2.0;
• Implementation guidance for web developers (techniques);

Stay up-to-date: W3C/WAI on Mobile Accessibility

Recap:

• iOS accessibility features and API are more mature
• Android devices have some good accessibility features and Google are working to improve
• Current market share favours iOS and Android devices over other vendors
• Available features on Android depends on device vendor — implementation stays the same

• Use site statistics from your own site to assess mobile OS and browser usage of your audience
• Assess your existing mobile support strategy
  • Which devices in your strategy have accessibility support?
• Support most popular devices on the market
  • Not all have good support for accessibility at the moment
    • HTML5accessibility.com
    • caniuse.com (can filter for mobile browsers)
  • Monitor upcoming releases
    • iOS Accessibility on apple.com
    • Android Accessibility (eyes-free) — Note: currently not up to date
• Monitor current user preferences
  • WebAIM’s screen reader user surveys are useful here

Be aware of the laws governing accessibility in your country.

• Equality Act
  • Introduced in October 2010
  • Replaces Disability Discrimination Act (DDA)
• Americans with Disabilities Act
  • No specific published technical requirements
  • In essence, conform to WCAG 2.0 A and AA requirements
• Section 508 of the US Rehabilitation Act
  • Governs US Federal Agencies
  • “information and communication technology” must be WCAG 2.0 compliant
• 21st Century Act
  • Says by 2013 phones must ship with accessible browsers
  • No defence for inaccessible content when handsets and browsers are accessible

• Existing policies
  • Informed by Corporate Social Responsibility
  • Equalities
  • Style guidelines
• New policy
  • Organisational
  • Product
  • Accessibility Statement
• BS 8878
  • British Standard
  • Web Accessibility Code of Practice

Make a test strategy

• Henny Swan has developed a great starting point:
  http://www.iheni.com/mobile-accessibility-tests/
• Easiest way to test is with speech output only
• Also, keep in mind:
  • Zoom only
  • Zoom with speech output also
  • Invert colors

The basics are the same as on desktop:

• Alternatives: images, audio, video
• Labelling: form controls, headings, buttons
• Good structure: landmarks, lists, heading levels
• Use native controls where possible
• Content order

Remember:

• Think BIG! Big elements are better than smaller ones.
• Don’t add roles or states to label text
• Localise

• iOS
  • Most of the way there with UIKit (a11y for free!), labels and traits
  • Accessibility Programming Guide for iOS
    • Guidelines for creating useful Labels and Hints
    • Identifying appropriate Traits
• Android
  • Most of the way there with setting contentDescription
  • role and state = built-in controls
    • Button
    • Text field
    • Checkbox, e.g. setChecked(boolean)
    • Radio button
    • Toggle button
    • Spinner
    • Pickers
  • Android Developers Accessibility Guide

• BBC Mobile Accessibility Guidelines
  • Essentially, a testing and techniques document
  • Working on more techniques
• Others guidelines include:
  • Mobile Accessibility Guidelines by Funka Nu
  • Accessibility Programming Guide for iOS
  • Android Developers Accessibility Guide
  • Nokia user experience for touch checklist (PDF)
  • Nokia user experience checklist for keyboard (PDF)
  • Design Guidelines for Windows Mobile
  • Widget Accessibility Guidelines