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

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

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.

Fe1782174fa3f0a2d07011df414a1267?s=128

Florian Harr

August 28, 2018
Tweet

Transcript

  1. None
  2. None
  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

  8. None
  9. None
  10. None
  11. None
  12. None
  13. Accessibility helps everyone Design and Develop for all your users

  14. Common Accessibility Problems Part II: Understanding the Problem

  15. None
  16. None
  17. None
  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”
  19. None
  20. “24.5” “26”

  21. Accessibility Technologies on iOS Part III: Solving the Problem

  22. None
  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
  49. None
  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?