Hitting a moving target: achieving mobile inclusion
2 likes1,324 views
The workshop presented by Jon Gibbins and Shadi Abou-Zahra focuses on achieving mobile inclusion by demonstrating accessibility features on major mobile platforms and how individuals with disabilities interact with touch screen technology. It covers various accessibility tools, guidelines, and strategies for integrating accessibility into mobile web projects. The presentation also highlights the market share of iOS and Android devices, emphasizing the improvements in accessibility features and the importance of considering legal requirements and user preferences.
Hitting a moving target: achieving mobile inclusion
- 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
- 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
- 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
- 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