Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Implementing inclusive interfaces in iOS

1,002 views

Published on

As mobile app developers, accessibility often gets pushed aside. For people with disabilities, the communication tools we take for granted are often denied to them. Let's talk about ways of building new interfaces to enable inclusivity and expand understanding of the complex landscape of users with accessibility needs.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Implementing inclusive interfaces in iOS

  1. 1. Implementing Inclusive Interfaces in iOS Sally Shepard // @mostgood
  2. 2. Implementing Inclusive Interfaces in iOS
  3. 3. accessible |əkˈsɛsɪb(ə)l| adjective able to be reached, entered, or used by people who have a disability.
  4. 4. disability?
  5. 5. inclusive |ɪnˈkluːsɪv| adjective not excluding any section of society or any party involved in something.
  6. 6. Implementing Inclusive Interfaces in iOS
  7. 7. interface |ˈɪntəәfeɪs| noun a device or program enabling a user to communicate with a computer.
  8. 8. interface != GUI
  9. 9. Vision
  10. 10. VoiceOver Zoom Invert Colors Greyscale Larger Text Bold Text Button Shapes Increase Contrast Reduce Motion On/Off Labels
  11. 11. VoiceOver replicates the GUI by speaking it.
  12. 12. VoiceOver speaks more than 30 languages
  13. 13. Available on iOS, OS X, Apple TV & Apple Watch
  14. 14. To extend VoiceOver, users can also use braille.
  15. 15. Braille displays
  16. 16. Braille Keyboards
  17. 17. That’s amazing!
  18. 18. Demo: Using VoiceOver
  19. 19. Physical / Motor skills
  20. 20. Assistive Touch
  21. 21. Switch Control
  22. 22. Demo: Switch Control
  23. 23. Learning Difficulties
  24. 24. Guided Access
  25. 25. How does Guided Access work?
  26. 26. Hearing
  27. 27. Hearing Aids LED Flash Mono Audio Noise Cancellation Audio Balance Subtitles & Captioning
  28. 28. Implementing Inclusive Interfaces in iOS
  29. 29. Basics of the Accessibility APIs
  30. 30. isAccessibilityElement sendButton.isAccessibliltyElement = YES;
  31. 31. accessibilityLabel - Label that identifies the accessibility element - UIKit control: uses title - Image-based controls definitely need to specify this! - Don’t include the control type
  32. 32. accessibilityHint - Describes the outcome of performing an action - Don’t make it sound like a command - Start with verb describing result - Keep it brief Note: can be disabled by user “Sends the message”
  33. 33. accessibilityTraits - Combination of traits that best characterise the accessibility element - UIKit controls: defaults to standard traits - Combine traits with an OR operator - (UIAccessibilityTraits)accessibilityTraits { return [super accessibilityTraits] | UIAccessibilityTraitButton; }
  34. 34. UIAccessibilityTraitNone; UIAccessibilityTraitButton; UIAccessibilityTraitLink; UIAccessibilityTraitSearchField; UIAccessibilityTraitImage; UIAccessibilityTraitSelected; UIAccessibilityTraitPlaysSound; UIAccessibilityTraitKeyboardKey; UIAccessibilityTraitStaticText; UIAccessibilityTraitSummaryElement; UIAccessibilityTraitNotEnabled; UIAccessibilityTraitUpdatesFrequently; UIAccessibilityTraitStartsMediaSession; UIAccessibilityTraitAdjustable; UIAccessibilityTraitAllowsDirectInteraction; UIAccessibilityTraitCausesPageTurn; UIAccessibilityTraitHeader;
  35. 35. accessibilityValue - Used when a element has a dynamic value
  36. 36. - Enable accessibility - Fill out Label and Hint - Add traits
  37. 37. Testing
  38. 38. Accessibility Inspector
  39. 39. Testing VoiceOver on a device
  40. 40. Siri - turn VoiceOver on
  41. 41. Screen curtain Three-finger triple-tap on the screen
  42. 42. Accessibility shortcut Triple-tap the home button
  43. 43. Testing Switch Control on a device
  44. 44. Inclusive User Experience
  45. 45. Book a flight Home - button Book a flight - heading Menu - button Selected - Plan a trip - button - 1 of 3 My searches - button - 2 of 3 Cheapest fares - button - 3 of 3 From LHR London United Kingdom - button To SFO San Francisco CA United States - button Depart 17 May 2015 - button Return 22 May 2015 - button Adults 1 - button Children 0 - button Infants 0 - button Class economy - button Ticket type lowest price - button Find flights - button Original Simplified
  46. 46. Adding polish
  47. 47. Find out if user has VoiceOver on BOOL isVoiceOverOn = UIAccessiblityIsVoiceOverRunning():
  48. 48. Moving VoiceOver focus UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, self.goButton);
  49. 49. Ignore an accessibility element UIButton *notThisButton = [UIButton ... ]; [notThisButton setAccessibilityTraits:UIAccessibilityTraitNone];
  50. 50. Direct Interaction - (UIAccessibilityTraits)accessibilityTraits { return UIAccessibilityTraitAllowsDirectInteraction; }
  51. 51. Localization and VoiceOver - (NSString *)accessibilityLabel { return NSLocalizedString(@"titleLabelText", nil); } titleLabel.accessibilityLabel = NSLocalizedString(@"titleLabelText", nil); //OR
  52. 52. Accessibility notifications UIAccessibilityPostNotification(NAME, PARAMETER); (UIAccessibilityPageScrolledNotification, @”Top of list”) (UIAccessibilityAnnouncementNotification, @”New message”) (UIAccessbilityLayoutChangedNotification, NSString or UIView) etc...
  53. 53. Find out when VoiceOver is finished speaking Listen out for: UIAccessibilityAnnouncementDidFinishNotification To find out if VoiceOver had finished reading or was interrupted, check the userInfo: UIAccessibilityAnnouncementKeyStringValue UIAccessibilityAnnouncementKeyWasSuccessful
  54. 54. Magic Tap Two-finger double-tap - (BOOL)accessibilityPerformMagicTap { [self doAwesomeThing]; return YES; }
  55. 55. Getting back two-finger, scrub back and forth - (BOOL)accessibilityPerformEscape { // Dismiss your view
 return YES; }
  56. 56. Modal presentation @property(nonatomic) BOOL accessibilityViewIsModal
  57. 57. Adding support for Switch Control UIAccessibilityNotificationSwitchControlIdentifier New in iOS 8:
  58. 58. Pause and Resume SwitchControl: UIAccessibilityPauseAssistiveTechnologyNotification UIAccessibilityResumeAssistiveTechnologyNotification
  59. 59. Adding Guided Access support UIGuidedAccessRestrictionDelegate
  60. 60. Things to do:
  61. 61. Spend a whole day with VoiceOver or Switch Control #1
  62. 62. I want you to feel frustrated. 😧
  63. 63. Don’t make assumptions. #2
  64. 64. Where should you start? Label and enable all elements. #3
  65. 65. Iterate & polish #4
  66. 66. Make it a requirement, not a feature. #5
  67. 67. Resources Testing Accessibility on iOS: developer.apple.com/library/ios/technotes/TestingAccessibilityOfiOSApps Sample code for non-UIKit: developer.apple.com/library/ios/samplecode/sc2216 Accessibility programming guide for iOS: developer.apple.com/library/ios/documentation/UserExperience/ Conceptual/iPhoneAccessibility Impairment Simulator Software: www.inclusivedesigntoolkit.com
  68. 68. bit.ly/inclusivetools
  69. 69. Thank you! Sally Shepard // @mostgood Feedback is important to us Please text @T08 to 39242

×