Mobile interaction and use is narrowing the digital divide, providing new opportunities for digital inclusion around the world. Mobile platforms such as iOS, Android, and Windows are rapidly evolving with richer and more robust accessibility features and support, giving developers more ways to create accessible mobile web applications. This presentation was delivered at e-access '13: http://www.headstar.com/eaccess13/agenda.html Online presentation: http://www.w3.org/People/shadi/Talks/2013/1031/Mobile/ Or: https://dl.dropboxusercontent.com/u/64311/training/2013-eaccess-553d7c/index.html

1. Hitting a moving target:
achieving mobile inclusion
Jon Gibbins, Accessibility Consultant, Dotjay Ltd
Shadi Abou-­Zahra, Activity Lead, W3C/WAI Program
Office
e-­access ’13 — 31 October 2013
Slide Notes
Presentation Home

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

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

4. Summary
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.
4

5. Mobile accessibility features
5

6. Mobile accessibility features
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
6

7. How do people with disabilities use
mobile devices?
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
7
Slide Notes
A short 1:08 minute video of Victor Tsaran navigating headings and
links using the iPhone. Navigating a web page with VoiceOver on an
iPhone -­ YouTube

8. iOS accessibility features
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
8

9. iOS accessibility features (2)
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
9
Photo credit: © Apple

10. iOS accessibility features (3)
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
10

11. Android accessibility features
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.
11

12. Demo
12

13. Demo: iOS
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
13

14. Demo: iOS (2)
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
14

15. Demo: iOS (3)
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
15

16. Who?
16

17. Empathy
17

18. Mobile is disabling for us all
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
18

19. Shared experiences
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
19

20. W3C Specifications &
Resources
20

21. Open Web Platform
21

22. Making it happen
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.
22

23. Accessibility Support
The Open Web Platform:
HTML5, CSS3, DOM, SVG, MathML, and many more;;
Web APIs such as Geolocation, Media Capture, ...;;
HTML Accessibility Task Force
23

24. Accessibility Extensions
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
24

25. Accessibility Guidelines
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;;
25

26. Implementation Guidance
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)
26

27. Looking Ahead
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
27

28. Strategy
28

29. Strategy
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
29

30. Strategy — device support
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
30

31. Strategy — legal requirements
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
31

32. Strategy — policy
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
32

33. Strategy — testing
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
33

34. Implementation
34

35. Implementation — basics
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
35

36. Implementation — iOS & Android
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
36

37. Implementation — guidance
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
37

38. Questions
38

39. Thank you
Jon Gibbins
Shadi Abou-Zahra
Mobile Accessibility Specialist and
Technical Director, DIG Inclusion
Activity Lead,
W3C/WAI Program Office
07968 108899
jon@diginclusion.com
www.diginclusion.com
web • mobile • PDF • Easy Read
+43.1.967.94.98
shadi@w3.org
www.w3.org/People/shadi/
© Jon Gibbins and Shadi Abou-­Zahra 2013