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.

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.
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