Mobile Accessibility Best Practices & Trends

1,991 views
1,935 views

Published on

Overview of Mobile Accessibility Best Practices & Trends

Published in: Technology, Business

Mobile Accessibility Best Practices & Trends

  1. 1. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCEIBM INTERACTIVE EXPERIENCE MOBILE ACCESSIBILITY BEST PRACTICES & TRENDS Aidan Tierney Senior Accessibility Consultant IBM Interactive Experience atierney@ca.ibm.com Guelph Accessibility Conference - May 27, 2014 slideshare.net/aidantierney/
  2. 2. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE IBM Interactive Experience & Accessibility  Accessibility consulting – assessments – remediation – training – corporate policy – compliance and governance  Customers include: – banks, insurance companies, provincial, federal government  Contribute to technical accessibility standards: WCAG & ARIA  Participation in policy bodies 2
  3. 3. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE THE MOBILE LANDSCAPE Circumstances and trends relating to accessibility Project team has no control over these 3
  4. 4. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Mobile: different experiences & technology  Native  Hybrid  Mobile web apps –Browser •Responsive •Specifically for mobile: – ‘m dot’: e.g. m.hilton.com 4
  5. 5. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Native AppsNative Apps Platform-specific. High quality. Code each platform. More OS release volatility. Native Application Device APIs 1001010101011101001010 0100101011101001001101 0101010100100100101111 0010011001010101001010 1010100101010101010101 0101011111100000101010 1010101001001010101010 1010001111010100011110 1010011101010111110010 1101111010001011001110 Mixed web and native components. Native services. Native Shell Web Native Device APIs <!DOCTY PE html PUBLIC created 2003-12 </p> </body> </html> 1001010 1010111 0100101 0101010 1010010 0100101 1110010 0110010 Hybrid Apps - WebHybrid Apps - Web Web app packaged in native shell. CSS skins. Native services. Native Shell Web Code <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-1 <head><title>XYZ</title </head> </body> </html> Device APIs Web AppsWeb Apps HTML5, JavaScript®. CSS skins. Develop faster. Develop cheaper. Result less powerful. No native services. Mobile Browser Web Code <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-12 - - <head><title>XYZ</title> </head> <body> </p> </body> </html> Browser Access Downloadable Downloadable Downloadable Mobile BrowserMobile Browser Hybrid Apps - WebHybrid Apps - Web Hybrid Apps-MixedHybrid Apps-Mixed Native AppsNative AppsNative AppsNative Apps Platform-specific. High quality. Code each platform. More OS release volatility. Native Application Device APIs 1001010101011101001010 0100101011101001001101 0101010100100100101111 0010011001010101001010 1010100101010101010101 0101011111100000101010 1010101001001010101010 1010001111010100011110 1010011101010111110010 1101111010001011001110 Native Application Device APIs 1001010101011101001010 0100101011101001001101 0101010100100100101111 0010011001010101001010 1010100101010101010101 0101011111100000101010 1010101001001010101010 1010001111010100011110 1010011101010111110010 1101111010001011001110 1001010101011101001010 0100101011101001001101 0101010100100100101111 0010011001010101001010 1010100101010101010101 0101011111100000101010 1010101001001010101010 1010001111010100011110 1010011101010111110010 1101111010001011001110 Mixed web and native components. Native services. Native Shell Web Native Device APIs <!DOCTY PE html PUBLIC created 2003-12 </p> </body> </html> 1001010 1010111 0100101 0101010 1010010 0100101 1110010 0110010 Native Shell Web Native Device APIs <!DOCTY PE html PUBLIC created 2003-12 </p> </body> </html> <!DOCTY PE html PUBLIC created 2003-12 </p> </body> </html> 1001010 1010111 0100101 0101010 1010010 0100101 1110010 0110010 1001010 1010111 0100101 0101010 1010010 0100101 1110010 0110010 Hybrid Apps - WebHybrid Apps - Web Web app packaged in native shell. CSS skins. Native services. Native Shell Web Code <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-1 <head><title>XYZ</title </head> </body> </html> Device APIs Native Shell Web Code <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-1 <head><title>XYZ</title </head> </body> </html> <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-1 <head><title>XYZ</title </head> </body> </html> Device APIs Web AppsWeb Apps HTML5, JavaScript®. CSS skins. Develop faster. Develop cheaper. Result less powerful. No native services. Mobile Browser Web Code <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-12 - - <head><title>XYZ</title> </head> <body> </p> </body> </html> Mobile Browser Web Code <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-12 - - <head><title>XYZ</title> </head> <body> </p> </body> </html> <!DOCTYPE html PUBLIC <html> <! - - created 2003-12-12 - - <head><title>XYZ</title> </head> <body> </p> </body> </html> Browser Access Downloadable Downloadable Downloadable Mobile BrowserMobile Browser Hybrid Apps - WebHybrid Apps - Web Hybrid Apps-MixedHybrid Apps-Mixed Native AppsNative Apps Device APIs Device APIs Device APIs Native, hybrids and browser
  6. 6. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Universal design, inclusive design 6 “The practice of making products that are inherently accessible to all users, regardless of ability.” Android “Products are simple, intuitive, and easy to use… So every device not only has accessible features — but accessible principles — built right in.” Apple
  7. 7. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Outlying use cases can become fundamental requirements 7
  8. 8. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Disability types  Blind  Low Vision  Colour Blind  Mobility Impairment  Deaf/Hard of Hearing  Cognitive Impairment  Seizure Disorders 8
  9. 9. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Situational and temporary disability  Created by challenging environments  No view of app (e.g. driving) – Speech output  Limited vision (e.g. dimly lit restaurant, bright sunlight) – High contrast – Screen magnification, zoom  Cannot touch screen (e.g. cooking, driving) – Speech input  Cannot hear the audio track of video (e.g. noisy bar) – Closed captions – Visual or haptic feedback and notification 9
  10. 10. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE MOBILE PLATFORMS & DEVICES 10
  11. 11. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Mobile platform market share 11 Source: comScore 2014 Canada Digital Future in Focus
  12. 12. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Platform version adoption 88% iOS devices using iOS 7 Released September 2013 8.5% Android devices using KitKat Released October 2013 12 Source: iOS Developer Program Source: Android Developer Dashboard
  13. 13. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE 18: The number of iOS devices since 2007  iPhone – 8 models since launch  iPad – 5 models  iPod Touch –5 models Source: Wikipedia 13
  14. 14. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE 11,868: Android device fragmentation 14 Source: OpenSignal: Android Fragmentation Visualized “We have seen 11,868 distinct devices download our app in the past few months. In our report last year we saw 3,997” – OpenSignal, July 2013
  15. 15. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE ACCESSIBILITY FEATURES & ASSISTIVE TECHNOLOGY 15
  16. 16. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Android Accessibility features  TalkBack (screen reader)  Captions  Magnification gestures  BrailleBack support  Touch & hold delay  Mono audio  Explore by touch  Change font size  Support only available in recent version of OS 16 Source: Google Android
  17. 17. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE iOS Accessibility features Vision  VoiceOver (screen reader)  Siri  Speak Selection  Dictation  Zoom  Font Adjustments  Invert Colors  Braille display support  Wireless Bluetooth keyboard support Deaf or hard of hearing  FaceTime  Closed Captions  Mono Audio  Visible and Vibrating Alerts  Made for iPhone Hearing Aids 17 Source: Apple Physical or motor challenges  AssistiveTouch  Siri  Switch Control
  18. 18. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE WebAim survey of screen reader users 18 Primary Mobile Platform % Apple iPhone, iPad, or iPod touch 65.2% Android 16% Nokia 14.3% Windows Phone 0.3% Blackberry 0.3% Other 4% Source: WebAim Survey of Screen Reader Users, 2014
  19. 19. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Mobile platform usage trend 19 Source: WebAim Survey 2014
  20. 20. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE iOS: Dominant platform for mobile AT  Accessibility features and assistive technology – Built into OS – No special downloads or extra cost – Updated with OS updates – Experience consistent across the device (Apple and 3rd party apps) – Consistent with Mac OS features  Extensive accessibility API  Robust support for WAI-ARIA 20
  21. 21. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE STANDARDS 21
  22. 22. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE There is no agreed standard  Ideally, app creators build to a standard  Ideally, makers of the user agents support the same standard – User agent = browsers, devices, AT  But this is not the case – Speed of change – Some of the major players aren’t too interested in standards 22
  23. 23. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE WCAG & Mobile • WCAG created before mobile was pervasive • Primarily deals with a browser-based experience • Doesn’t address gestures and other changes to interaction model • Native apps are more like software than web applications. 23
  24. 24. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE ‘Official’ mobile development practices  Mobile Web Best Practices 1.0 – (2008)  Mapping between WCAG and MWBP  Mobile Web Application Best Practices– (2010) 24
  25. 25. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Emerging mobile development practices  BBC Mobile Accessibility Standards and Guidelines – Comprehensive and practical – Code samples for web, iOS and Android – Recommendations later in this presentation draw on these  Platform-specific guidance:  Apple  Android 25
  26. 26. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE CREATING ACCESSIBLE APPS Practices a project team can often control 26
  27. 27. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE POLICIES FOR MOBILE ACCESSIBILITY Mostly for the enterprise, but even a small project will need to address these topics 27
  28. 28. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Set the Standard  Decide which standard the enterprise will meet – Since there is no real standard, must define one  Communicate mobile accessibility requirements across the enterprise and to vendors  Authorize someone to interpret and rule on accessibility standards issues  Create a process to check for conformance to the standard  Create a clear exception process – Accept that standard will never actually be met – Define when and how apps will request exceptions and who will approve them 28
  29. 29. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Target mobile platforms, devices and AT  Decide which mobile platforms and devices to target for accessibility support – iOS and/or Android and which versions – Which browser if a web app? Support varies – Which devices – Bluetooth keyboard support? – Understand the accessibility (and limitations) of the device, operating system, assistive technology  Communicate decisions internally and to customers  Focus effort where most benefit  Remember it’s not only about screen readers! 29
  30. 30. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Testing: tools and methods  Select, acquire and distribute testing tools – Both developers an testers need these  Create test practices that align with existing test methods  Create accessibility testing procedures – Step by step instructions – Pass/fail/exception 30
  31. 31. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Training  Identify and address skills gaps  New requirements require new skills  Deliver targeted training based on role 31
  32. 32. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Compliance  Compliance documents conformance to the standard  Compliance doesn’t always require 100% conformance  Where conformance is not met: – Reasons why not – Plans and timeline to address issues – Sign-off from senior executive of business unit  Communicate results internally, and with government and the public as appropriate 32
  33. 33. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE INTERACTION DESIGN 33
  34. 34. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Personas  If you currently use personas, include persons with disabilities  Disability is not what defines a user  Consider their experience: power user or novice  Disability may be situational or temporary  Users may not always self-identify as disabled  For more info see: – AEGIS project personas – Just Ask: Integrating Accessibility Throughout Design 34
  35. 35. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Interaction design process  Inclusive design from the start  Wireframe can communicate accessibility requirements to designers & development team – Roles of elements (button, checkbox) – State (e.g. selected) – Labels (including off-screen text)  Assess wireframes for accessibility  Document off-screen text 35
  36. 36. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Labels and controls  Standard OS controls – Custom controls often less accessible – Use standard controls as intended  Labels, inputs and instructions – Set input types (e.g. phone, date, number) – Indicate expected or default values – Required or optional – Labels close to control (important for low vision users) – Portrait mode: label above control – Landscape mode: label to the left of control – Inside text field or drop down also effective 36
  37. 37. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Focus & context  Focus or context should not automatically change when a field is focused or on input  Focus visible when expected  Warn users when launching a browser or another application (e.g. pdf) 37
  38. 38. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Zoom, resize & scroll  Do not disable pinch zoom  Do not block scrolling  Use relative sizing for containers 38
  39. 39. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Feedback  Notify screen reader users if the layout of a screen changes  Feedback must be provided for user action  Provide time-out warnings or alternatives to timeout  Audio alerts need visual alternative (and/or haptic) 39
  40. 40. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Navigation  Back buttons must correctly move the users back one step  Use consistent and recognizable navigation across related screens and between desktop, web and mobile.  Give screens a unique title  For mobile web, give users options to switch between full/mobile versions 40
  41. 41. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Alerts & pop-ups  Use standard OS alerts where available  Non system pop-ups should completely fit on the screen, take focus properly, identify themselves to screen readers. 41
  42. 42. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE VISUAL DESIGN 42
  43. 43. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Visual design  Colour contrast ratio – 7:1 recommended  Target size – min 9.6mm  Indicate swipe areas – Visual and audible clues so content is discoverable  Tap symmetry  Don’t use images of text – Unless logos or other WCAG exceptions 43
  44. 44. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE CONTENT & LANGUAGE 44
  45. 45. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Consistent language across brand  Language on app consistent with website – Labelling, navigation, buttons  Content team can own off-screen text  Consistent and concise off-screen text  Tooltips should not repeat link text or other alternatives 45
  46. 46. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE DEVELOPMENT 46
  47. 47. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE App development process  Provide clear requirements for build and testing  Provision tools (e.g. Bluetooth keyboard), licenses  Allow time for learning requirements, AT and tools  Explain how and when to unit test for accessibility  When in doubt code to spec not to fix AT quirks  Connect developers with accessibility testers  Determine an exception process 47
  48. 48. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Development practices  Simple touch events triggered when touch is removed from a control not when first touched  Support alternative input methods to touch – E.g. external keyboards – Some users may use touch and keyboard  Ensure elements are focusable and focus visible  Communicate changes of state so that both sighted and non-sighted users can perceive the change – E.g. ,selected/not selected, delete/deleted, add/added  Controls, elements, and objects must be properly grouped and labeled 48
  49. 49. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Making an App Accessible in iOS SDK  iOS Accessibility API and Tools  The UI Accessibility Programming Interface  Accessibility Attributes – Label – Traits – Hint – Frame – Value  Defining Custom Attribute Information in Interface Builder  Debug Accessibility in iOS Simulator with the Accessibility Inspector  Test Accessibility on Your Device with VoiceOver 49
  50. 50. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE iOS SDK Interface Builder Inspector Pane 50
  51. 51. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE TESTING 51
  52. 52. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Unit testing for Accessibility  Developers can do this  Yes they can  Most testing must be on the devices and with AT, not a simulator  Apple Accessibility Inspector  There are no automated tests for mobile native at this time  HTML syntax checking tools 52
  53. 53. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Acceptance testing for Accessibility  Accessibility Verification Testing (AVT)  Create custom test procedures  Most testing must be on device, not a simulator  Few options for automated testing  Align with existing test methods but realize this differs  Be realistic that not everything will pass – user agent issues and bugs (browser, AT, device)  Create a process to deal with non-conformance 53
  54. 54. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Usability testing  Testing your app with users who have a disability  Can be informal  Doesn’t have to be complicated 54
  55. 55. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE RESOURCES 55
  56. 56. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Platform agnostic standards & best practices  BBC Mobile Accessibility Standards and Guidelines  Mobile Web Best Practices 1.0  Mapping between WCAG and MWBP  Mobile Web Application Best Practices  Research Report on Mobile Web Accessibility 56
  57. 57. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE iOS Accessibility resources  Accessibility Programming Guide for iOS  Designing for iOS 7  Verifying App Accessibility on iOS  Accessibility Inspector runs in iOS Simulator  Debug Accessibility in iOS Simulator with the Accessibility Inspector 57
  58. 58. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Android Accessibility resources • Android Developer Resources for Accessibility • Accessibility Developer Checklist • Android Design Patterns for Accessibility • Accessibility Testing Checklist 58
  59. 59. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE QUESTIONS & COMMENTS 59
  60. 60. © 2014 IBM Corporation IBM INTERACTIVE EXPERIENCE Contact information Aidan Tierney Senior Accessibility Consultant IBM Interactive Experience atierney@ca.ibm.com slideshare.net/aidantierney/ ca.linkedin.com/in/aidantierney/ 60 • ca.linkedin.com/in/aidantierney/

×