View
434
Download
1
Category
Preview:
DESCRIPTION
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
Citation preview
Slide Notes
Presentation Home
Hitting a moving target:achieving mobile inclusion
Jon Gibbins, Accessibility Consultant, Dotjay LtdShadi Abou-Zahra, Activity Lead, W3C/WAI ProgramOffice
e-access ’13 — 31 October 2013
Jon Gibbins (Dotjay)
Accessibility consultant at DIG Inclusion
Web developer since 2003
Assistive technology since 2002
Hello
2
Shadi Abou-ZahraW3C Web Accessibility Initiative (WAI)Activity Lead, WAI International Program Office
Hello
3
This workshop will:give an overview of the accessibility features available on themajor mobile platforms;;demonstrate how people with disabilities interact withtechnologies such as touch screens;;introduce some of the accessibility guidelines, specifications,and resources for mobile;;suggest strategies and techniques for integrating accessibilityinto projects on the mobile web and mobile platforms;;invite delegate questions in a Q&A session.
Summary
4
Mobile accessibility features
5
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
Mobile accessibility features
6
Slide Notes
A short 1:08 minute video of Victor Tsaran navigating headings andlinks using the iPhone. Navigating a web page with VoiceOver on aniPhone - YouTube
1. Explore by touchDrag finger over screenItems under your finger are described by screen readerTap with a second finger or double tap to open/activate
2. Gesture navigationSwipe right/left moves focus to next/previous content insequenceItems are described by screen reader as focus movesDouble tap to open/activate
How do people with disabilities use mobile devices?
7
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
iOS accessibility features
8
FaceTime — used by deaf peopleGuided AccessAssistive TouchSpeak selectionCaptioned content (QuickTime)
Custom vibrationsLED FlashHearing aid support
Mono audio and balance controlTTY (used by the Deaf)iMessageVisual Voicemail
iOS accessibility features (2)
Photo credit: © Apple
9
New in iOS 7:Switch ControlHandwriting supportMore enhancements:Dynamic TypeLarger cursorsCustomisable styles for captions and subtitlesMore interface customisationsGuided Access improvementsBraille support improvements
iOS 7 Accessibility videos by Luis Perez on YouTube
iOS accessibility features (3)
10
TalkBackBundled since version 4.0 (Ice Cream Sandwich)Explore by touch only on Ice Cream SandwichJelly Bean behaves a lot like iOSDownload for version 2.2+
Zoom (system wide)Pinch zoomVoice inputHaptic feedbackLarge text
Note: Available features depends on devicevendor.
Android accessibility features
11
Demo
12
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
Demo: iOS
13
1. Triple click the Home key toactivate
2. Dial to open the Rotor3. Swipe up/down to navigateparts
4. Swipe right/left fornext/previous content
Demo: iOS (2)
14
1. Triple click the Home key toactivate
2. Dial to open the Rotor3. Swipe up/down to navigate
parts4. Swipe right/left fornext/previous content
Demo: iOS (3)
15
Who?
16
Empathy
17
Small screeniPhone is 1/12 of a typical desktop screen40-pixel finger is big on small targetsCan be hard to reach some parts of the screen
Small text sizesis like having low vision
Small input devicesEyes-freeis like being blind, e.g. in car
Mobile is disabling for us all
18
Shared experiences, comparable to temporarydisability: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
Shared experiences
19
W3C Specifications &Resources
20
Open Web Platform
21
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.
Making it happen
22
The Open Web Platform:
HTML5, CSS3, DOM, SVG, MathML, and many more;;Web APIs such as Geolocation, Media Capture, ...;;
HTML Accessibility Task Force
Accessibility Support
23
Accessible Rich Internet Applications (WAI-ARIA):Provides additional markup, especially for dynamiccontent;;http://www.w3.org/WAI/intro/aria
Independent User Interface (IndieUI):Defines ways for communicating user actions toapplications;;http://www.w3.org/WAI/intro/indieui
Accessibility Extensions
24
Web Content Accessibility Guidelines(WCAG) 2.0:Defines accessible web content, regardless of device;;Addresses many shared experiences with mobile webusers;;
User Agent Accessibility Guidelines (UAAG)2.0:Defines accessible user agents, including some"apps";;Guidance includes several Mobile AccessibilityExamples;;
Accessibility Guidelines
25
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)
Implementation Guidance
26
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
Looking Ahead
27
Strategy
28
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
Strategy
29
Use site statistics from your own site to assessmobile OS and browser usage of your audienceAssess your existing mobile support strategyWhich devices in your strategy have accessibility support?
Support most popular devices on the marketNot all have good support for accessibility at the moment
HTML5accessibility.comcaniuse.com (can filter for mobile browsers)
Monitor upcoming releasesiOS Accessibility on apple.comAndroid Accessibility (eyes-free) — Note: currently not up to date
Monitor current user preferencesWebAIM’s screen reader user surveys are useful here
Strategy — device support
30
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
Strategy — legal requirements
31
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
Strategy — policy
32
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
Strategy — testing
33
Implementation
34
The basics are the same as on desktop:Alternatives: images, audio, videoLabelling: form controls, headings, buttonsGood structure: landmarks, lists, heading levelsUse native controls where possibleContent order
Remember:Think BIG! Big elements are better than smallerones.Don’t add roles or states to label textLocalise
Implementation — basics
35
iOSMost of the way there with UIKit (a11y for free!), labels andtraitsAccessibility Programming Guide for iOS
Guidelines for creating useful Labels and HintsIdentifying appropriate Traits
AndroidMost of the way there with setting contentDescriptionrole and state = built-in controls
ButtonText fieldCheckbox, e.g. setChecked(boolean)Radio buttonToggle buttonSpinnerPickers
Android Developers Accessibility Guide
Implementation — iOS & Android
36
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
Implementation — guidance
37
Questions
38
Jon GibbinsMobile Accessibility Specialist and
Technical Director, DIG Inclusion
07968 108899
jon@diginclusion.com
www.diginclusion.com
web • mobile • PDF • Easy Read
Shadi Abou-ZahraActivity Lead,
W3C/WAI Program Office
+43.1.967.94.98
shadi@w3.org
www.w3.org/People/shadi/
Thank you
© Jon Gibbins and Shadi Abou-Zahra 2013
Recommended