Development For All The People - Accessibility on iOS @360iDev 2018

How accessible is your iOS app? Could you use your app if you were blind?

If you would have asked me that question a year ago, I would have been embarrassed. If you felt the same, don’t be – we can fix this.

We spend so much time on UX but often forget a huge demographic. Did you know that iOS is the leading platform for those who rely on these features? So why not spend a little extra time to make everyone’s lives a little easier.

Let’s see how we can add accessibility support with little to no additional work, increase inclusion, and profit from this win-win situation.
We’ll also do a little experiment and look at real user data that’ll make accessibility accessible to all of us.

Transcript

3. Development For All The People 360iDev, Denver CO - August 28th 2018 Florian Harr (@caffeineflo), iOS Developer @ Kabbage, Inc.
4. –Review on the AppStore, IoT Project “[…] For the first time in my life I can control the AC myself. Thanks for making your app accessible.”
5. China USA Japan Brazil Germany France South Korea Deaf and Hard-of-Hearing Spain Blind and Low-Vision Canada Italy Mexico Czech Republic Limited Dexterity 0 75,000,000 150,000,000 225,000,000 300,000,000 People who use the internet (US only) Users with accessibility needs Worldwide Internet Usage Compared With US AX Needs Sources: Disability Status Report, Cornell University 2018,World Bank (WDI, 2008), CDC (NHI Survey 2008),
6. 1. Different Accessibility Needs 2. Common Accessibility Problems 3. Accessibility Technologies on iOS 4. How To Test Accessibility Features? 5. Great iOS Accessibility Examples 6. Conclusion - What To Take Away From This Talk Agenda
7. Different Accessibility Needs Part I: Introduction
13. Accessibility helps everyone Design and Develop for all your users
14. Common Accessibility Problems Part II: Understanding the Problem
18. “Amazon Prime - Image” “274” “Apple TV - 32GB (4th Generation)” “Free Delivery by Tuesday, Aug 21” How many reviews make up that number? What does this number represent? What does that picture indicate? If this item has a strikethrough price, how can we separately identify those prices? “Rating 4.3 out of 5”
20. “24.5” “26”
21. Accessibility Technologies on iOS Part III: Solving the Problem
23. VoiceOver Zoom Magnifier Display accomondations Speak Selection, Speak Screen and Typing Feedback Face ID and attention aware features (iPhone X) Large, bold and high-contrast text Button shapes Reduce motion On/off switch labels Assignable ringtones and vibrations Audio descriptions Made for iPhone hearing aids Mono audio and balance Subtitles and closed captions LED Flash for Alerts Call audio routing Phone noise cancellation Support for TTY and RTT Visual Voicemail Switch Control AssistiveTouch Touch Accommondations Use accessibility features with Siri Voice Control Reachability 3D Touch Widescreen keyboards Large phone keypad Software and hardware keyboards Guided Access
24. UIKit Controls UIAccessibility
 
 
 isAccessibilityElement: Bool
 accessibilityElement: String? accessibilityHint: String?
 accessibilityTraits: UIAccessibilityTraits implements VoiceOver SwitchControl AssistiveTouch Reduced Motion access UIAccessibility
 implementation access UIAccessibility
 implementation access UIAccessibility
 implementation
25. VoiceOver • isAccessibilityElement - Declares an element accessible (true or false) • accessibilityLabel - Summarizing the accessible element (“Play music”) • accessibilityHint - What the action will trigger (“Music will play”) • accessibilityTraits - Characterizes an accessibility element (.adjustable)
26. VoiceOver override func viewDidLoad() { super.viewDidLoad() // Slider Setup Code // VoiceOver Reads: Label, Value, Traits and Hint slider.accessibilityLabel = "Setpoint temperature:" slider.accessibilityValue = String(format: “%.1f Degree Celsius", slider.value) slider.accessibilityTraits = UIAccessibilityTraitAdjustable slider.accessibilityHint = “Change Setpoint Temperature" } @IBAction func sliderChanged(_ sender: UISlider) { slider.accessibilityValue = String(format: “%.1f Degree Celsius", slider.value) }
27. VoiceOver
28. VoiceOver UIAccessibilityContainer - Protocol to make custom UIViews or group otherwise separate views accessible let axContainer = UIAccessibilityElement(accessibilityContainer: view) axContainer.accessibilityLabel = “\(productTitle.text!)\(productManufacturer.text!), It’s \(productPrice.text!), \(primeImage.accessibilityLabel!), with \(deliveryInfo.text!), \(ratingImage.accessibilityLabel!)\across (ratingLabel.accessibilityLabel!)" axContainer.accessibilityFrame = productContainer.frame view.accessibilityElements = [axContainer] See Delivering an Exceptional Accessibility Experience “Apple TV - 32 GB (4th Generation) by Apple. It’s 149$ with Prime shipping. Free Delivery by Tuesday, Aug 21. Rating 4.6 out of 5 across 274 reviews”
29. VoiceOver
30. Gestures and custom actions // 2 Finger Tap override func accessibilityPerformMagicTap() -> Bool { // Toggle most important state of your app. } // 2 Finger Z Shape override func accessibilityPerformEscape() -> Bool { // Implement to escape modally presented view } // UIAccessibilityCustomAction - VO: Actions Rotor or Action Menu home.accessibilityCustomActions = [UIAccessibilityCustomAction(name: "Custom Action", target: self, selector: #selector(customAccessibilityAction))] @objc func customAccessibilityAction(action: UIAccessibilityCustomAction) {}
31. Dynamic Type • Interface Builder:
 “Automatically Adjusts Font” • Programmatically:
 func preferredFont(forTextStyle style: UIFontTextStyle) -> UIFont • iOS 10+:
 Set:
 var adjustsFontForContentSizeCategory: Bool { get set } • Pre- iOS 10+:
 Observe:
 UIContentSizeCategoryDidChange: NSNotification.Name
32. Dynamic Type • Interface Builder Warnings: • Trailing or Leading Constraints • Automatically Adjusts Font need Dynamic Type text style • Avoid Overlapping or Clipping • Use Pseudo Language while prototyping
33. Accessibility Checks static var isVoiceOverRunning: Bool static var isSwitchControlRunning: Bool static var isShakeToUndoEnabled: Bool static var isClosedCaptioningEnabled: Bool static var isBoldTextEnabled: Bool static var isDarkerSystemColorsEnabled: Bool static var isGrayscaleEnabled: Bool static var isGuidedAccessEnabled: Bool static var isInvertColorsEnabled: Bool static var isMonoAudioEnabled: Bool static var isReduceMotionEnabled: Bool static var isReduceTransparencyEnabled: Bool static var isSpeakScreenEnabled: Bool static var isSpeakSelectionEnabled: Bool.
34. Design Considerations
35. Large Text - 3:1 Regular Text - 4.5:1 Preferred - 7:1
36. Source https://contrast-ratio.com/
37. Dark mode with and without red-green colorblindness Source: Apple Human Interface Guidelines
38. • Tap Targets need to be at least 44x44pt • Don’t communicate information through icons Source: Apple Human Interface Guidelines
39. How To Test Accessibility Features? Part III: Solving the Problem
40. • How to use VoiceOver • Accessibility Inspector • Top 5 Tests How To Test Accessibility Features?
41. ng VoiceOver in Settings Enabling VoiceOver in Settings Turn On/Off VoiceOver
42. Navigating with VoiceOver ome with VoiceOver App Switcher VoiceOver App Switcher Home Two Finger Scrub 2 Finger Escape context Setting the Rotor Setting Rotor
43. VoiceOver Without Cheating Scrub 3x
44. Accessibility Inspector • Let’s you inspect Accessibility Elements • Turn On/Off certain accessibility modes • Dynamic Type • Automated Audit - static rules (e.g. tap target size) and missing configurations
45. Top 5 Tests 1. Can you hear every image that conveys information? 2. Can you hear all text? 3. Is every View on every ViewController accessible? 4. Is every action tappable? 5. Are you displaying all information with x-large dynamic type?
46. Great iOS Accessibility Examples Part IV: Learning From Others
47. Duolingo • Automatically switches VO language • AttributedString provides VO language
48. • Non Standard UIKit View • Accessible through UIAccessibilityContainer • No Information hidden in icons/images • Each Datapoint individually accessible as well as containers
50. Conclusion - What To Take Away From This Talk Part V: Things To Remember
51. • Test your app without cheating (screen curtain, etc.) • If you can’t use it with Accessibility features, no one can • Test for large dynamic type and contrast ratio • Caption icons and images that convey information • Don't let custom UI elements or complex interfaces stop you to communicate information to everyone
52. Design for everyone
53. Questions?