Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

iOS Accessibility

A new look at Accessibility, giving it a broader definition and rewards, followed by an Overview of the iOS Accessibility Features, and finally Guidelines for Designers and Developers, including “good” and “bad” examples to better understand how it all works in practice.

  • Inicia sesión para ver los comentarios

iOS Accessibility

  1. 1. iOS Accessibility Low Effort, High Reward Luis Abreu UX Designer
  2. 2. Agenda Accessibility iOS Guidelines & Examples
  3. 3. Agenda Accessibility iOS Guidelines & Examples
  4. 4. Accessibility is UX turned up to 11.
  5. 5. Impairments Severity Nature Duration Mild External Temporary Severe Internal Chronic
  6. 6. Blindness, Deafness Impairments Severity Nature Duration Mild External Temporary • Severe • Internal • Chronic
  7. 7. Dyspraxia, RSI Impairments Severity Nature Duration • Mild External • Temporary Severe • Internal Chronic
  8. 8. Sunlight, Noise, Multitasking Impairments Severity Nature Duration Mild • External • Temporary • Severe Internal Chronic
  9. 9. Accessibility is inclusion, and robustness.
  10. 10. …one last thing about Accessibility
  11. 11. –2011 WHO World Report on Disability “15 percent (1 Billion) of the world’s population (7 Billion) live with some kind of impairment”
  12. 12. –UN Factsheet on Persons with Disabilities “75% of the FTSE 100 companies in the UK do not meet basic levels of accessibility, thus missing out on more than £96 ($147) million in revenue.”
  13. 13. 🤔 If Accessibility is so important, how come I mostly hear about it at events like this?
  14. 14. Survivorship Bias
  15. 15. Survivorship Bias Overlooking those that did not survive because of their lack of visibility.
  16. 16. “Engagement” Bias Overlooking those that did not survive use your app because of their lack of visibility.
  17. 17. Accessible apps are rare, this is an opportunity.
  18. 18. Accessibility Takeaways • Accessible apps are Inclusive and Robust • Impairments vary in Severity, Nature, and Duration • No Complaints != No Problem or Opportunity
  19. 19. Agenda Accessibility iOS Guidelines & Examples
  20. 20. Assistive Technologies Any feature or hardware that informs or helps users interact with your app in a way that’s most accessible to them.
  21. 21. LED Flash Alerts Button Shapes Audio Descriptions Hold Duration Reachability Ignore Repeat Dictionary Darken Colors Closed Captions SDH Reduce White Point 3D Touch Sensitivity Home Button SpeedGrayscale Audio Balance Hearing Aid Mode Inverted Colors Button ShapesLarger Text Reduced Motion Tap Assistance Mono Audio Reduced Transparency Bold Text Switch Labels Speak Selection Zoom Switch Control VoiceOver Assistive Touch A. Hardware Speak Screen
  22. 22. Impairments - Technologies Mild Severe Visual Larger Text Astigmatism VoiceOver Blindness Hearing Mono Audio Partial Deafness Captions Deafness Motor Assistive Touch RSI Switch Control Tetraplegia Learning Speak Screen Dyslexia Guided Access Autism
  23. 23. Larger Text Default LargestSmallest
  24. 24. Reduce Transparency
  25. 25. Assistive Touch
  26. 26. VoiceOver Perception and Interaction
  27. 27. lmjabreu.wistia.com/medias/o2k8ln3iy8
  28. 28. VoiceOver Perceive and Interact without seeing the screen or direct manipulation • Move through UI elements sequentially and announce them via Speech or Braille • Perform actions using a single button: whole screen/external Very popular for Vision impairments Doesn’t support 3D games, drawing apps Free (saving thousands), Built-in, High-Quality
  29. 29. Switch Control Interaction through any means possible
  30. 30. lmjabreu.wistia.com/medias/7iynpnjild
  31. 31. Switch Control Interact without touching the screen • Move through UI elements sequentially, automatically or manually • Point at elements using a gliding cursor (slower, any app) • Select elements and actions via external switches • Activated with head, chin, mouth, eyes, wrist, finger, etc Very popular for Motor impairments Also free, Built-in, High-Quality
  32. 32. Assistive Hardware Hundreds of supported Input/Output Devices • i.e. Braille Displays, Hearing Aids, Sip-and-Puff Zero Design or Development effort
  33. 33. Braille Display $2839 / £1885
  34. 34. Switches Simple $59 / £39 Chin $199 / £132 Sip-and-Puff $389 / £258 Sensitive $79 / £52 Motion $699 / £464
  35. 35. Agenda Accessibility iOS Guidelines & Examples
  36. 36. How do I Accessibility 🤔 now that we’ve seen benefits and iOS technologies
  37. 37. Guidelines 1. Perceivable 2. Operable 3. Understandable 4. Robust For Designers and Developers
  38. 38. ⚠ Always Remember Don’t assume perfect Vision, Hearing, Physical and Motor, Learning and Literacy abilities Abilities can be limited by external conditions such as Sunlight, Noise, Multitasking
  39. 39. Do I know it’s there? Perceivable
  40. 40. Color Blindness Use shape, color, and animation, as well as audio cues. Brings your app to life, provides resistance to color impairments.
  41. 41. Color-rich Red star is easy to spot.
  42. 42. Color… may fail. Where’s the star again?
  43. 43. Color and shape. Outlined vs. Filled, Red vs. Green.
  44. 44. …or just shape. Outlined vs. Filled
  45. 45. Shape, it works even without color. Color speeds up recognition, but clear shapes, and ultimately, text remove ambiguity.
  46. 46. Low Vision Good contrast makes reading text, distinguishing elements or state easier, or even possible.
  47. 47. External blindness Sunlight changes how your app (Spotify) is perceived.
  48. 48. External blindness Go high contrast, test the usage context and device.
  49. 49. Blindness, Deafness. Text is elementary, unambiguous, easily converted to audio or braille.
  50. 50. Name the icon.
  51. 51. Name the icon.
  52. 52. Text is unambiguous, clear. And it can look good. Unambiguous options Clear consequence
  53. 53. Can I use it? Operable
  54. 54. Assisted Interaction Do use custom UI components and gestures to speed interactions but consider severely impaired users.
  55. 55. Timing Don’t automatically perform or constrain actions to a time limit.
  56. 56. Does it make sense? Understandable
  57. 57. Language Use simple, familiar language for both text and metaphors. Localize your app.
  58. 58. Gmail doesn’t speak my language. What’s that icon on the top right? Why are add contact and attach disabled like the back button? # Gmail $ Mail
  59. 59. Citymapper is localized I can see the price in a familiar, local currency, and bus stop identifier letters help me avoid mistakes.
  60. 60. Error Identification Communicate through text, clearly.
  61. 61. Is it future-proof? Robust
  62. 62. Native Leverage ready-to-use, familiar components
  63. 63. Map View Label Header Slider Page View Switch Text View Text Field Table View Collection View Tab Bar Segmented Control Activity Indicator Page Control Stepper Alert Date Picker Picker View Image Picker Document PickerNavigation Bar ToolBar Search Bar Contact Picker Button Generic Picker Media Picker Image View Printer Picker
  64. 64. Nothing is free Talking about an idea isn't free Deciding wether to implement isn't free QA won't be free Informing users won't be free Testing won't be free Updating support isn't free Maintaining it isn't free Undoing it won't be free adapted from Intercom’s Product Management book
  65. 65. iOS is designed to save you work. Invent, don’t reinvent. …so cheesy ¯_( )_/¯
  66. 66. Accessibility Semantics Describe your app to iOS
  67. 67. Accessibility Semantics answer: Purpose Am I relevant for Accessibility? Name How do I identify myself? Personality What are my characteristics? Value Do I change with user interaction or time? Interaction How exactly do I work? Location Where am I?
  68. 68. Purpose var isAccessibilityElement: Bool Basic Accessibility API
  69. 69. not recommended [Image]; [Do Not Disturb; Button]. Do Not Disturb Don’t “Image” is unhelpful, redundant
  70. 70. recommended Do Not Disturb; Button. Do Not DisturbDo Not Disturb Do Hide unhelpful, redundant elements.
  71. 71. Name var accessibilityLabel: String? Basic Accessibility API
  72. 72. not recommended Button. M.I.A. Bad Girls Don’t “Button” clarifies neither identity or consequence
  73. 73. recommended Play, Bad Girls by M.I.A.; Button. M.I.A. Bad Girls Do Identity and consequence are clear
  74. 74. Personality var accessibilityTraits: UIAccessibilityTraits Basic Accessibility API
  75. 75. Detail not recommended Detail. Don’t “Detail” provides identity but not personality
  76. 76. Detail recommended Detail; Button. Do “Button” declares interactive personality
  77. 77. Value var accessibilityValue: String? Basic Accessibility API
  78. 78. not recommended 9:00 … 9:00 … 9:00 … 9:00 12 6 5 4 3 2 111 10 9 8 7 12 6 5 4 3 2 111 10 9 8 7 12 6 5 4 3 2 111 10 9 8 7 12 6 5 4 3 2 111 10 9 8 7 Don’t State changes aren’t perceptible
  79. 79. 12 6 5 4 3 2 111 10 9 8 7 12 6 5 4 3 2 111 10 9 8 7 12 6 5 4 3 2 111 10 9 8 7 12 6 5 4 3 2 111 10 9 8 7 recommended 9:00 … 9:08 … 9:30 … 9:41 Do Value changes with time
  80. 80. Interaction var accessibilityHint: String? Basic Accessibility API
  81. 81. not recommended Reorder Lisbon; Button, Draggable. Lisbon San Francisco Don’t No helpful interaction hint
  82. 82. recommended Reorder Lisbon; Button, Draggable; Double tap and hold, wait for the sound, then drag to rearrange. Lisbon San Francisco Do Provides a helpful interaction hint
  83. 83. Location var accessibilityFrame: CGRect Basic Accessibility API
  84. 84. not recommended Incorrect size and position. Lisbon San Francisco Don’t Confusing, which element am I focused on again?
  85. 85. recommended Large, well-positioned, easy to see. Lisbon San Francisco Do Clearly indicate highlighted element.
  86. 86. Advanced Accessibility API func accessibilityIncrement / Decrement() (with .Adjustable Trait) func accessibilityActivate() -> Bool func accessibilityScroll(_ direction: UIAccessibilityScrollDirection) -> Bool func accessibilityPerformEscape() -> Bool func accessibilityPerformMagicTap() -> Bool var accessibilityActivationPoint: CGPoint var accessibilityElementsHidden: Bool var accessibilityLanguage: String? var accessibilityPath: UIBezierPath? var accessibilityViewIsModal: Bool var shouldGroupAccessibilityChildren: Bool var accessibilityNavigationStyle: UIAccessibilityNavigationStyle var accessibilityCustomActions: [UIAccessibilityCustomAction]? enum UIAccessibilityZoomType: Int struct UIAccessibilityNotifications for Accommodations, Announcement status and Highlight Control struct UIAccessibilitySpeechAttributePunctuation(NSNumber)/Language(NSString)/Pitch(NSNumber) for attr. strings
  87. 87. Summary Accessibility iOS Guidelines & Examples
  88. 88. Accessibility • Shares principles with UX, not a separate effort. • More than just severe impairments, sunlight can blind you. • Few accessible apps, make a difference, or business.
  89. 89. iOS Low Effort, High Reward
  90. 90. Low Effort Accessibility is built-in and robust • Accessible UI Elements for display, interaction, navigation • Simple APIs for Custom Accessible UI Components • Free Assistive Technologies • Free Assistive Hardware support
  91. 91. High Reward Easier Testing, Multi-Language/Device/Orientation/Tasking • Shared benefits from using Dynamic Text, Auto-Layout, Built-in Components Wider, happier userbase • App works regardless of disability, or situation Radically improve people’s lives by giving them independence • Communication • Entertainment • Business
  92. 92. Guidelines & Examples Design • Perceivable, Operable, Understandable, and Robust Development • Relevance, Name, Personality, Value, Interaction, and Location
  93. 93. Twitter
 @lmjabreu
 
 iOS Accessibility Handbook
 leanpub.com/iosaccessibility
 
 Apple Accessibility Documentation
 developer.apple.com/accessibility/ios Thank you

×