Slides for 'Implementing Inclusive Interfaces' from YOW! Connected 2015 in Melbourne, Australia. As mobile developers, accessibility often gets pushed aside. For people with disabilities, the communication tools we take for granted are often denied to them. I want to talk about ways of building new interfaces to enable inclusivity and expand peoples understanding of the complex landscape of users with accessibility needs. It's obviously not easy to make mobile apps accessible - otherwise more apps would be. Over the past few years, apps have become more complex and accessibility has suffered. Through research, user testing and experimentation, I've found ways to speed up the process of making a mobile app accessible. For the first part of the talk, I would like to cover understanding the complex landscape of users, and the tools that Apple provide developers to enable these users to use their devices. This would include a few short demos of different aspects of accessibility features available on iOS - mostly VoiceOver and Switch Control. The second part of the talk would focus on ways of improving accessibility UX and how to quickly and effectively implement it in mobile apps. The talk would be helpful for any mobile app developers regardless of platform, but the code examples and demos would be given on iOS.

1. Implementing
Inclusive
Interfaces
Sally Shepard // @mostgood

2. Implementing
Inclusive
Interfaces

3. accessible |əkˈsɛsɪb(ə)l|
adjective
able to be reached, entered, or used
by people who have a disability.

4. disability?

5. inclusive |ɪnˈkluːsɪv|
adjective
not excluding any section of society
or any party involved in something.

6. Implementing
Inclusive
Interfaces

7. interface |ˈɪntəәfeɪs|
noun
a device or program enabling a user
to communicate with a computer.

8. interface != GUI

9. Vision

10. VoiceOver
Zoom
Invert Colors
Greyscale
Larger Text
Bold Text
Button Shapes
Reduce Transparency
Increase Contrast
Reduce Motion
On/Off Labels

11. VoiceOver replicates
the GUI by speaking it.

12. VoiceOver speaks more
than 30 languages

13. Available on
iOS, OS X, Apple TV
& Apple Watch

14. To extend VoiceOver,
users can also use braille.

15. Braille displays

16. Braille displays

17. Braille Keyboards

18. That’s amazing!

19. Demo: Using VoiceOver

20. Physical /
Motor skills

21. Assistive Touch

22. New in iOS 9!
Touch Accommodation
Hold Duration
Tap Assistance

23. Switch Control

25. Demo: Switch Control

26. Learning
Difficulties

27. Guided Access

28. How does Guided
Access work?

29. Hearing

30. Hearing Aids
LED Flash
Mono Audio
Noise Cancellation
Audio Balance
Subtitles & Captioning

31. Implementing
Inclusive
Interfaces

32. Accessibility APIs
Classes:
UIAccessibilityElement
UIAccessibilityCustomAction
Informal Protocols:
UIAccessibility
UIAccessibilityAction
UIAccessibilityContainer
UIAccessibilityFocus
Protocols:
UIAccessibilityReadingContent
UIAccessibilityIdentification

33. Basics of the
Accessibility APIs

34. isAccessibilityElement
sendButton.isAccessibliltyElement = YES;

35. VoiceOver: Describe the element
Label: Invert Colours - Off
Hint: Double-tap to toggle setting
Label: Vision
Trait: Heading

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

37. 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;
}

38. UIAccessibilityTraitNone;
UIAccessibilityTraitButton;
UIAccessibilityTraitLink;
UIAccessibilityTraitSearchField;
UIAccessibilityTraitImage;
UIAccessibilityTraitSelected;
UIAccessibilityTraitPlaysSound;
UIAccessibilityTraitKeyboardKey;
UIAccessibilityTraitStaticText;
UIAccessibilityTraitSummaryElement;
UIAccessibilityTraitNotEnabled;
UIAccessibilityTraitUpdatesFrequently;
UIAccessibilityTraitStartsMediaSession;
UIAccessibilityTraitAdjustable;
UIAccessibilityTraitAllowsDirectInteraction;
UIAccessibilityTraitCausesPageTurn;
UIAccessibilityTraitHeader;

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

40. - Enable accessibility
- Fill out Label and Hint
- Add traits

41. Testing

42. Simulator - Accessibility Inspector

43. Testing VoiceOver
on a device

44. Siri - turn VoiceOver on

45. Screen curtain
Three-finger triple-tap on the screen

46. Accessibility shortcut
Triple-tap the home button

47. Testing Switch Control
on a device

48. Inclusive User Experience

49. Make it functional.

50. Step 1:
Make a list of essential
user stories / features.

51. Step 2:
Test each feature,
recording the results as
you go.

52. Step 3:
Fix it until it’s functional.

53. Case study:
Gift Finder by
notonthehighstreet.com

54. A user can view all details about a product.
A user can purchase a product or products through the checkout.
A user can browse through the products by pre-defined categories.
A user can find a product by searching.
A user can select a product from a list of chosen picks.
A user can sort a list of products by relevance, price or date added.
A user can filter a list of products by price range and various criteria.
A user can view a list of products as a list or a grid.
A user can add a product to a list of favourites.
A user can add a product to the basket.
A user can customise a product by personalizing it.

55. A user can view all details about a product.

56. A user can view all
details about a
product.

57. A user can view all
details about a
product.

58. A user can view all
details about a
product.

59. A user can view all
details about a
product.

62. Testing results:
Highlight what’s read
out.

63. Testing results:
Highlight what’s read
out.

64. Testing results:
Highlight what’s read
out.

65. Testing results:
Highlight what’s read
out.

66. Testing results:
Block out anything
not enabled.

67. Testing results:
Block out anything
not enabled.

68. Testing results:
Block out anything
not enabled.

69. Testing results:
Block out anything
not enabled.

70. Add your testing results
to source control.

71. Fix any elements that
are not working.

72. - (void)viewDidLoad {
...
[self.closeButton setTitle:NSLocalizedString(@“close button title", nil)
forState:UIControlStateNormal];
self.closeButton.accessibilityTraits = UIAccessibilityTraitButton;
self.imageScrollView.isAccessibilityElement = YES;
self.addToFavouritesButton.isAccessibilityElement = YES;
[self.addToFavouritesButton setTitle:NSLocalizedString(@“add to favourites button
title", nil) forState:UIControlStateNormal];
self.addToFavouritesButton.accessibilityTraits = UIAccessibilityTraitButton;
self.addToCartButton.isAccessibilityElement = YES;
[self.addToCartButton setTitle:NSLocalizedString(@“add to cart button title", nil)
forState:UIControlStateNormal];
self.addToCartButton.accessibilityTraits = UIAccessibilityTraitButton;
...
}
In the “product detail class”

73. Fix it until it’s functional.

74. Adding polish

75. - (void)viewDidLoad {
...
self.isAccessibilityElement = YES;
self.accessibilityLabel = [NSString stringWithFormat:@"%@, %@", self.titleLabel.text,
self.priceLabel.text];
self.titleLabel.isAccessibilityElement = NO;
self.priceLabel.isAccessibilityElement = NO;
...
}
Group elements - In the “product cell class”

76. Find out if user has
VoiceOver on
BOOL isVoiceOverOn =
UIAccessiblityIsVoiceOverRunning():

77. Moving VoiceOver focus
UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification,
self.goButton);

78. Direct Interaction
- (UIAccessibilityTraits)accessibilityTraits
{
return UIAccessibilityTraitAllowsDirectInteraction;
}

79. Localization and
VoiceOver
- (NSString *)accessibilityLabel {
return NSLocalizedString(@"titleLabelText", nil);
}
titleLabel.accessibilityLabel =
NSLocalizedString(@"titleLabelText", nil);
//OR

80. Accessibility notifications
UIAccessibilityPostNotification(NAME, PARAMETER);
(UIAccessibilityPageScrolledNotification, @”Top of list”)
(UIAccessibilityAnnouncementNotification, @”New message”)
(UIAccessbilityLayoutChangedNotification, NSString or UIView)
etc...

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

82. Magic Tap
Two-finger double-tap
- (BOOL)accessibilityPerformMagicTap
{
[self doAwesomeThing];
return YES;
}

83. Getting back
two-finger, scrub back and forth
- (BOOL)accessibilityPerformEscape
{
// Dismiss your view
return YES;
}

84. Modal presentation
@property(nonatomic) BOOL accessibilityViewIsModal

85. Reduce transparency
UIAccessibilityIsReduceTransparencyEnabled()
Reduce motion
UIAccessibilityIsReduceMotionEnabled()

86. Custom Actions
UIAccessibilityCustomAction
UIAccessibilityCustomAction *favouriteAction = [[UIAccessibilityCustomAction
alloc] initWithName:@“Add to favourites" target:self
selector:@selector(addToFavourites)];
UIAccessibilityCustomAction *addToBasketAction = [[UIAccessibilityCustomAction
alloc] initWithName:@“Add to basket" target:self
selector:@selector(addToBasket)];
for (UIView *element in cardView.accessibilityElements) {
element.accessibilityCustomActions = @[helloAction, goodbyeAction];
}

87. Web Content
https://developer.apple.com/videos/
wwdc/2014/?include=516#516
ARIA Support
Closed Captions for HTML5
Video
HTML5 Timed Text Tracks
HTML5 Media Synchronization
Captions for video
High DPI for image-set
Page visibility events
Web Speech API

88. Adding support for
Switch Control
UIAccessibilityNotificationSwitchControlIdentifier
New in iOS 8:

89. Pause and Resume
SwitchControl:
UIAccessibilityPauseAssistiveTechnologyNotification
UIAccessibilityResumeAssistiveTechnologyNotification

90. Adding Guided
Access support
UIGuidedAccessRestrictionDelegate

91. Homework!

92. Spend a whole day
with VoiceOver or
Switch Control
#1

93. Don’t make
assumptions.
#2

94. Where should you start?
Make it functional!
#3

95. Iterate & polish
#4

96. Make it a requirement
not a feature.
#5

97. 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
WatchOS Accessibility WWDC session:
https://developer.apple.com/videos/wwdc/2015/?id=204
Impairment Simulator Software:
www.inclusivedesigntoolkit.com

98. Thank you!
Sally Shepard // @mostgood