Save 37% off PRO during our Black Friday Sale! »

iOS Accessibility

99146b3b3de649a68348af51ac1a85fd?s=47 Luis Abreu
December 09, 2015

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.

99146b3b3de649a68348af51ac1a85fd?s=128

Luis Abreu

December 09, 2015
Tweet

Transcript

  1. iOS Accessibility Low Effort, High Reward Luis Abreu UX Designer

  2. Agenda Accessibility iOS Guidelines & Examples

  3. Agenda Accessibility iOS Guidelines & Examples

  4. Accessibility is UX turned up to 11.

  5. None
  6. Impairments Severity Nature Duration Mild External Temporary Severe Internal Chronic

  7. Blindness, Deafness Impairments Severity Nature Duration Mild External Temporary •

    Severe • Internal • Chronic
  8. Dyspraxia, RSI Impairments Severity Nature Duration • Mild External •

    Temporary Severe • Internal Chronic
  9. Sunlight, Noise, Multitasking Impairments Severity Nature Duration Mild • External

    • Temporary • Severe Internal Chronic
  10. Accessibility is inclusion, and robustness.

  11. …one last thing about Accessibility

  12. –2011 WHO World Report on Disability “15 percent (1 Billion)

    of the world’s population (7 Billion) live with some kind of impairment”
  13. –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.”
  14. If Accessibility is so important, how come I mostly hear

    about it at events like this?
  15. Survivorship Bias

  16. Survivorship Bias Overlooking those that did not survive because of

    their lack of visibility.
  17. “Engagement” Bias Overlooking those that did not survive use your

    app because of their lack of visibility.
  18. Accessible apps are rare, this is an opportunity.

  19. Accessibility Takeaways • Accessible apps are Inclusive and Robust •

    Impairments vary in Severity, Nature, and Duration • No Complaints != No Problem or Opportunity
  20. Agenda Accessibility iOS Guidelines & Examples

  21. Assistive Technologies Any feature or hardware that informs or helps

    users interact with your app in a way that’s most accessible to them.
  22. 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 Speed Grayscale Audio Balance Hearing Aid Mode Inverted Colors Button Shapes Larger 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
  23. 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
  24. Larger Text Default Largest Smallest

  25. Reduce Transparency

  26. Assistive Touch

  27. VoiceOver Perception and Interaction

  28. lmjabreu.wistia.com/medias/o2k8ln3iy8

  29. 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
  30. Switch Control Interaction through any means possible

  31. lmjabreu.wistia.com/medias/7iynpnjild

  32. 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
  33. Assistive Hardware Hundreds of supported Input/Output Devices • i.e. Braille

    Displays, Hearing Aids, Sip-and-Puff Zero Design or Development effort
  34. Braille Display $2839 / £1885

  35. Switches Simple $59 / £39 Chin $199 / £132 Sip-and-Puff

    $389 / £258 Sensitive $79 / £52 Motion $699 / £464
  36. Agenda Accessibility iOS Guidelines & Examples

  37. How do I Accessibility now that we’ve seen benefits and

    iOS technologies
  38. Guidelines 1. Perceivable 2. Operable 3. Understandable 4. Robust For

    Designers and Developers
  39. ⚠ 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
  40. Do I know it’s there? Perceivable

  41. Color Blindness Use shape, color, and animation, as well as

    audio cues. Brings your app to life, provides resistance to color impairments.
  42. Color-rich Red star is easy to spot.

  43. Color… may fail. Where’s the star again?

  44. Color and shape. Outlined vs. Filled, Red vs. Green.

  45. …or just shape. Outlined vs. Filled

  46. Shape, it works even without color. Color speeds up recognition,

    but clear shapes, and ultimately, text remove ambiguity.
  47. Low Vision Good contrast makes reading text, distinguishing elements or

    state easier, or even possible.
  48. External blindness Sunlight changes how your app (Spotify) is perceived.

  49. External blindness Go high contrast, test the usage context and

    device.
  50. Blindness, Deafness. Text is elementary, unambiguous, easily converted to audio

    or braille.
  51. Name the icon.

  52. Name the icon.

  53. Text is unambiguous, clear. And it can look good. Unambiguous

    options Clear consequence
  54. Can I use it? Operable

  55. Assisted Interaction Do use custom UI components and gestures to

    speed interactions but consider severely impaired users.
  56. Timing Don’t automatically perform or constrain actions to a time

    limit.
  57. Does it make sense? Understandable

  58. Language Use simple, familiar language for both text and metaphors.

    Localize your app.
  59. 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
  60. Citymapper is localized I can see the price in a

    familiar, local currency, and bus stop identifier letters help me avoid mistakes.
  61. Error Identification Communicate through text, clearly.

  62. Is it future-proof? Robust

  63. Native Leverage ready-to-use, familiar components

  64. 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 Picker Navigation Bar ToolBar Search Bar Contact Picker Button Generic Picker Media Picker Image View Printer Picker
  65. 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
  66. iOS is designed to save you work. Invent, don’t reinvent.

    …so cheesy ¯\_(ϑ)_/¯
  67. Accessibility Semantics Describe your app to iOS

  68. 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?
  69. Purpose var isAccessibilityElement: Bool Basic Accessibility API

  70. not recommended [Image]; [Do Not Disturb; Button]. Do Not Disturb

    Don’t “Image” is unhelpful, redundant
  71. recommended Do Not Disturb; Button. Do Not Disturb Do Not

    Disturb Do Hide unhelpful, redundant elements.
  72. Name var accessibilityLabel: String? Basic Accessibility API

  73. not recommended Button. M.I.A. Bad Girls Don’t “Button” clarifies neither

    identity or consequence
  74. recommended Play, Bad Girls by M.I.A.; Button. M.I.A. Bad Girls

    Do Identity and consequence are clear
  75. Personality var accessibilityTraits: UIAccessibilityTraits Basic Accessibility API

  76. Detail not recommended Detail. Don’t “Detail” provides identity but not

    personality
  77. Detail recommended Detail; Button. Do “Button” declares interactive personality

  78. Value var accessibilityValue: String? Basic Accessibility API

  79. not recommended 9:00 … 9:00 … 9:00 … 9:00 12

    6 5 4 3 2 1 11 10 9 8 7 12 6 5 4 3 2 1 11 10 9 8 7 12 6 5 4 3 2 1 11 10 9 8 7 12 6 5 4 3 2 1 11 10 9 8 7 Don’t State changes aren’t perceptible
  80. 12 6 5 4 3 2 1 11 10 9

    8 7 12 6 5 4 3 2 1 11 10 9 8 7 12 6 5 4 3 2 1 11 10 9 8 7 12 6 5 4 3 2 1 11 10 9 8 7 recommended 9:00 … 9:08 … 9:30 … 9:41 Do Value changes with time
  81. Interaction var accessibilityHint: String? Basic Accessibility API

  82. not recommended Reorder Lisbon; Button, Draggable. Lisbon San Francisco Don’t

    No helpful interaction hint
  83. 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
  84. Location var accessibilityFrame: CGRect Basic Accessibility API

  85. not recommended Incorrect size and position. Lisbon San Francisco Don’t

    Confusing, which element am I focused on again?
  86. recommended Large, well-positioned, easy to see. Lisbon San Francisco Do

    Clearly indicate highlighted element.
  87. 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
  88. Summary Accessibility iOS Guidelines & Examples

  89. 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.
  90. iOS Low Effort, High Reward

  91. 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
  92. 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
  93. Guidelines & Examples Design • Perceivable, Operable, Understandable, and Robust

    Development • Relevance, Name, Personality, Value, Interaction, and Location
  94. Twitter
 @lmjabreu
 
 iOS Accessibility Handbook
 leanpub.com/iosaccessibility
 
 Apple Accessibility

    Documentation
 developer.apple.com/accessibility/ios Thank you