Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Funka Accessibility Days: Mobile Accessibility ...

Funka Accessibility Days: Mobile Accessibility - A Technical Perspective and iOS Case Study

A technical look at mobile accessibility: What is mobile accessibility? What technologies do we care about? How does one specific set of mobile accessibility APIs work, that being iOS? What are some mobile specific design concerns?

Sommer Panage

April 17, 2018
Tweet

More Decks by Sommer Panage

Other Decks in Programming

Transcript

  1. How to Put the World in your Pocket A Technical

    Look at Mobile Accessibility on iOS Sommer Panage Sommer Panage - Funka Accessibility Days 2018
  2. Sommer Panage - Funka Accessibility Days 2018 https://www.w3.org/WAI/mobile/ “Mobile accessibility

    refers to making websites and applications more accessible to people with disabilities when they are using mobile phones and other devices.”
  3. Sommer Panage - Funka Accessibility Days 2018 Mobile challenges •

    Touch screens • Small screens • Different input modalities • Variable usage environment https://www.w3.org/WAI/mobile/
  4. Sommer Panage - Funka Accessibility Days 2018 Today • Key

    assistive technologies present on mobile devices • Technical case study: iOS UIAccessibility APIs • Accessible design concerns on mobile
  5. Sommer Panage - Funka Accessibility Days 2018 Color Settings Color

    Inversion https://www.apple.com/accessibility/
  6. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary

    • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
  7. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary

    • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
  8. Sommer Panage - Funka Accessibility Days 2018 Steps: Dynamic Type

    1. Use system-sized fonts 2. Tell your text fields, labels etc. to respect system-sized fonts dynamically 3. Use AutoLayout to make sure that anything housing text can grow
  9. Sommer Panage - Funka Accessibility Days 2018 1. Use system-sized

    fonts User updates font between application runs
  10. Sommer Panage - Funka Accessibility Days 2018 In code… funkaLabel.font

    = UIFont.preferredFont(forTextStyle: .title1) funkaLabel.numberOfLines = 0
  11. Sommer Panage - Funka Accessibility Days 2018 2. Respect dynamic

    system font changes User updates font DURING application run
  12. Sommer Panage - Funka Accessibility Days 2018 More on AutoLayout

    • WWDC 2017 - Apple - Auto Layout Techniques in Interface Builder • UIKonf 2017 - Mischa Hildebrand - Auto Layout: From Trailing to Leading • GOTO 2015 - Sam Davies - Adaptive UI
  13. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary

    • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
  14. Sommer Panage - Funka Accessibility Days 2018 Display accommodations •

    Invert colors • Color filters • Increased contrast • Grayscale • Reduce motion • Reduce transparency
  15. Sommer Panage - Funka Accessibility Days 2018 How to check…

    UIAccessibilityDarkerSystemColorsEnabled() UIAccessibilityIsGrayscaleEnabled() UIAccessibilityIsInvertColorsEnabled() UIAccessibilityIsReduceMotionEnabled() UIAccessibilityIsReduceTransparencyEnabled()
  16. Sommer Panage - Funka Accessibility Days 2018 A special note

    on inversion var accessibilityIgnoresInvertColors: Bool { get set }
  17. Sommer Panage - Funka Accessibility Days 2018 Generally speaking •

    Test your app in each display mode • Make adjustments as needed • Do not use color alone to signal the user!
  18. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary

    • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
  19. Sommer Panage - Funka Accessibility Days 2018 “Mail. One new

    item. Double-tap to open.” Accessibility Label Accessibility Value Accessibility Hint
  20. Sommer Panage - Funka Accessibility Days 2018 Accessibility Label •

    Tells us what the object is. • Strings will be their own labels, but… • Image based controls need this set manually • Don’t include the type of object or control this is (i.e. “button”) • Good labels: “Mail” “Send” “New Tweet” • Bad labels: “Mail icon” “Send button” “Tap this to tweet”
  21. Sommer Panage - Funka Accessibility Days 2018 Accessibility Value •

    Less frequently used • Useful when an item has a dynamic value • If focus doesn’t move but value changes, only value is read • Don’t repeat the label! • Good values: “One new item” “50 percent” • Bad labels: “One new mail item” “50 percent of the slider”
  22. Sommer Panage - Funka Accessibility Days 2018 Accessibility Hint •

    Describes outcome of activation, i.e. double-tap • May also describe other possible actions • Should start with verb and be concise • Good values: “Sends message” “Double-tap and hold to delete” • Bad labels: “You can send the message” “Delete”
  23. Sommer Panage - Funka Accessibility Days 2018 “Compose. Button. Double-tap

    and hold to bring up drafts.” Accessibility Trait
  24. Sommer Panage - Funka Accessibility Days 2018 Accessibility Traits •

    Not strings! iOS will handle the correct strings • Describe characteristics of the object • Link, button, adjustable, image, etc. • UIKit objects have default traits, but you may need to add more • Should use bitwise-or to combine traits
  25. Sommer Panage - Funka Accessibility Days 2018 March 20th, 2018.

    297 minutes. What about things that aren’t views?
  26. Sommer Panage - Funka Accessibility Days 2018 Custom UIAccessibilityElement var

    barElement = UIAccessibilityElement(accessibilityContainer: self) barElement.accessibilityLabel = "\(date) \(minutesString)" barElement.accessibilityFrameInContainerSpace = barFrame
  27. Sommer Panage - Funka Accessibility Days 2018 Accessibility Elements self.isAccessibilityElement=

    false self.accessibilityElements = [barElement1, barElement2, barElement3]
  28. Sommer Panage - Funka Accessibility Days 2018 Custom Accessibility Elements

    • Set isAccessibilityElement on self to false • All custom UIAccessibilityElement objects must have • label • frame • Set accessibilityElements array when: • Not using UIViews (custom drawing) • Controlling VoiceOver reading-order of elements
  29. Sommer Panage - Funka Accessibility Days 2018 Custom Gestures •

    Two-finger double tap = Magic Tap • Two-finger “Z” = Escape • Three-finger swipe-up or swipe-down = Scroll
  30. Sommer Panage - Funka Accessibility Days 2018 Supporting Custom Gestures

    override func accessibilityPerformMagicTap() -> Bool { // Handle gesture return true // if gesture was handled, false otherwise } override func accessibilityPerformEscape() -> Bool { // Handle gesture return true // if gesture was handled, false otherwise } override func accessibilityScroll(_ direction: UIAccessibilityScrollDirection) -> Bool { // Handle gesture return true // if gesture was handled, false otherwise }
  31. Sommer Panage - Funka Accessibility Days 2018 Alax Allan. April

    29, 2016. Soma Discount. Actions Available Custom Actions
  32. Sommer Panage - Funka Accessibility Days 2018 Custom Accessibility Actions

    let deleteAction = UIAccessibilityCustomAction(name: “Delete", target: self, selector: #selector(deletedSelectedMessage)) let moreAction = UIAccessibilityCustomAction(name: “More", target: self, selector: #selector(moreActionSheetForSelectedMessage)) self.accessibilityCustomActions = [deleteAction, moreAction]
  33. Sommer Panage - Funka Accessibility Days 2018 Custom Accessibility Actions

    • UIAccessibilityCustomAction initialized with a localized name, target and action • Set the accessibilityCustomActions on the correct view • Best used when a view has • gestures • many buttons within it
  34. Sommer Panage - Funka Accessibility Days 2018 Notifications • Announcements

    should be localized • Other notification types include: • UIAccessibilityScreenChangedNotification • UIAccessibilityLayoutChangedNotification • UIAccessibilityPageScrolledNotification
  35. Sommer Panage - Funka Accessibility Days 2018 VoiceOver in Summary

    • Basic labels, values, traits, hints • Custom elements • VoiceOver gestures • Custom actions • Announcements
  36. Sommer Panage - Funka Accessibility Days 2018 Case study: Summary

    • Vision • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
  37. Sommer Panage - Funka Accessibility Days 2018 Checking for Captions

    if UIAccessibilityIsClosedCaptioningEnabled() { // Do something } NotificationCenter.default.addObserver( self, selector: #selector(captionStatusDidChange), name: Notification.Name.UIAccessibilityClosedCaptioningStatusDidChange, object: nil)
  38. Sommer Panage - Funka Accessibility Days 2018 Captions • Primarily

    a content concern • App layout changes or manual captions possible
  39. Sommer Panage - Funka Accessibility Days 2018 Summary • Vision

    • Font scaling • Display accommodations • Screen readers • Hearing • Captions • Motor • Universal switch • Learning/cognitive (primarily a design concern)
  40. Sommer Panage - Funka Accessibility Days 2018 Switch Control •

    Good VoiceOver support ➡ Good Switch Control support • Custom Actions work with Switch Control as well • A few cases for special concern • Stopping the cursor • Modifying how the cursor navigates items
  41. Sommer Panage - Funka Accessibility Days 2018 Stopping the Cursor

    UIAccessibilityPostNotification(UIAccessibilityPauseAssistiveTechnologyNotification, “a11y-cat-animation“) // Cat animation occurs UIAccessibilityPostNotification(UIAccessibilityResumeAssistiveTechnologyNotification, “a11y-cat-animation“)
  42. Sommer Panage - Funka Accessibility Days 2018 Modifying Cursor Hierarchy

    self.accessibilityNavigationStyle = UIAccessibilityNavigationStyle.separate
  43. Sommer Panage - Funka Accessibility Days 2018 Similar to Web

    • Contrast • 3:1 for large text • 4.5:1 for normal text • Simplify colors • Simplify design
  44. Sommer Panage - Funka Accessibility Days 2018 Tap Targets •

    Don’t make users tap tiny things! • 44 pts x 44 pts (9mm square) • At least 32 points apart
  45. Sommer Panage - Funka Accessibility Days 2018 Gestures • Conflict

    with screen reader gestures • Learning curve • Memorization • Not the same between apps • Not motor-disability friendly
  46. Sommer Panage - Funka Accessibility Days 2018 Gestures = Power-User

    Features! • Make things easier • Save time • Be equivalent to another set of actions
  47. Sommer Panage - Funka Accessibility Days 2018 Recap • Color

    and text settings, screen readers, switch systems and more • Technical case study: iOS UIAccessibility APIs • UX / Design: Tap Targets and Gestures