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
Sally Shepard // @mostgood
Implementing
Inclusive
Interfaces
accessible |əkˈsɛsɪb(ə)l|
adjective
able to be reached, entered, or used
by people who have a disability.
disability?
inclusive |ɪnˈkluːsɪv|
adjective
not excluding any section of society
or any party involved in something.
Implementing
Inclusive
Interfaces
interface |ˈɪntəәfeɪs|
noun
a device or program enabling a user
to communicate with a computer.
interface != GUI
Vision
VoiceOver
Zoom
Invert Colors
Greyscale
Larger Text
Bold Text
Button Shapes
Reduce Transparency
Increase Contrast
Reduce Mo...
VoiceOver replicates
the GUI by speaking it.
VoiceOver speaks more
than 30 languages
Available on
iOS, OS X, Apple TV
& Apple Watch
To extend VoiceOver,
users can also use braille.
Braille displays
Braille displays
Braille Keyboards
That’s amazing!
Demo: Using VoiceOver
Physical /
Motor skills
Assistive Touch
New in iOS 9!
Touch Accommodation
Hold Duration
Tap Assistance
Switch Control
Demo: Switch Control
Learning
Difficulties
Guided Access
How does Guided
Access work?
Hearing
Hearing Aids
LED Flash
Mono Audio
Noise Cancellation
Audio Balance
Subtitles & Captioning
Implementing
Inclusive
Interfaces
Accessibility APIs
Classes:
UIAccessibilityElement
UIAccessibilityCustomAction
Informal Protocols:
UIAccessibility
UIAcces...
Basics of the
Accessibility APIs
isAccessibilityElement
sendButton.isAccessibliltyElement = YES;
VoiceOver: Describe the element
Label: Invert Colours - Off
Hint: Double-tap to toggle setting
Label: Vision
Trait: Heading
accessibilityLabel
- Label that identifies the accessibility element
- UIKit control: uses title
- Image-based controls defi...
accessibilityTraits
- Combination of traits that best characterise
the accessibility element
- UIKit controls: defaults to...
UIAccessibilityTraitNone;
UIAccessibilityTraitButton;
UIAccessibilityTraitLink;
UIAccessibilityTraitSearchField;
UIAccessi...
accessibilityHint
- Describes the outcome of performing an action
- Don’t make it sound like a command
- Start with verb d...
- Enable accessibility
- Fill out Label and Hint
- Add traits
Testing
Simulator - Accessibility Inspector
Testing VoiceOver
on a device
Siri - turn VoiceOver on
Screen curtain
Three-finger triple-tap on the screen
Accessibility shortcut
Triple-tap the home button
Testing Switch Control
on a device
Inclusive User Experience
Make it functional.
Step 1:
Make a list of essential
user stories / features.
Step 2:
Test each feature,
recording the results as
you go.
Step 3:
Fix it until it’s functional.
Case study:
Gift Finder by
notonthehighstreet.com
A user can view all details about a product.
A user can purchase a product or products through the checkout.
A user can br...
A user can view all details about a product.
A user can view all
details about a
product.
A user can view all
details about a
product.
A user can view all
details about a
product.
A user can view all
details about a
product.
Testing results:
Highlight what’s read
out.
Testing results:
Highlight what’s read
out.
Testing results:
Highlight what’s read
out.
Testing results:
Highlight what’s read
out.
Testing results:
Block out anything
not enabled.
Testing results:
Block out anything
not enabled.
Testing results:
Block out anything
not enabled.
Testing results:
Block out anything
not enabled.
Add your testing results
to source control.
Fix any elements that
are not working.
- (void)viewDidLoad {
...
[self.closeButton setTitle:NSLocalizedString(@“close button title", nil)
forState:UIControlState...
Fix it until it’s functional.
Adding polish
- (void)viewDidLoad {
...
self.isAccessibilityElement = YES;
self.accessibilityLabel = [NSString stringWithFormat:@"%@, %@...
Find out if user has
VoiceOver on
BOOL isVoiceOverOn =
UIAccessiblityIsVoiceOverRunning():
Moving VoiceOver focus
UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification,
self.goButton);
Direct Interaction
- (UIAccessibilityTraits)accessibilityTraits
{
return UIAccessibilityTraitAllowsDirectInteraction;
}
Localization and
VoiceOver
- (NSString *)accessibilityLabel {
return NSLocalizedString(@"titleLabelText", nil);
}
titleLab...
Accessibility notifications
UIAccessibilityPostNotification(NAME, PARAMETER);
(UIAccessibilityPageScrolledNotification, @”T...
Find out when VoiceOver is
finished speaking
Listen out for: UIAccessibilityAnnouncementDidFinishNotification
To find out if...
Magic Tap
Two-finger double-tap
- (BOOL)accessibilityPerformMagicTap
{
[self doAwesomeThing];
return YES;
}
Getting back
two-finger, scrub back and forth
- (BOOL)accessibilityPerformEscape
{
// Dismiss your view

return YES;
}
Modal presentation
@property(nonatomic) BOOL accessibilityViewIsModal
Reduce transparency
UIAccessibilityIsReduceTransparencyEnabled()
Reduce motion
UIAccessibilityIsReduceMotionEnabled()
Custom Actions
UIAccessibilityCustomAction
UIAccessibilityCustomAction *favouriteAction = [[UIAccessibilityCustomAction
al...
Web Content
https://developer.apple.com/videos/
wwdc/2014/?include=516#516
ARIA Support
Closed Captions for HTML5
Video
HT...
Adding support for
Switch Control
UIAccessibilityNotificationSwitchControlIdentifier
New in iOS 8:
Pause and Resume
SwitchControl:
UIAccessibilityPauseAssistiveTechnologyNotification
UIAccessibilityResumeAssistiveTechnolo...
Adding Guided
Access support
UIGuidedAccessRestrictionDelegate
Homework!
Spend a whole day
with VoiceOver or
Switch Control
#1
Don’t make
assumptions.
#2
Where should you start?
Make it functional!
#3
Iterate & polish
#4
Make it a requirement
not a feature.
#5
Resources
Testing Accessibility on iOS:
developer.apple.com/library/ios/technotes/TestingAccessibilityOfiOSApps
Sample code...
Thank you!
Sally Shepard // @mostgood
Implementing Inclusive Interfaces
Implementing Inclusive Interfaces
Implementing Inclusive Interfaces
Upcoming SlideShare
Loading in …5
×

Implementing Inclusive Interfaces

371 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Implementing Inclusive Interfaces

  1. 1. Implementing Inclusive Interfaces Sally Shepard // @mostgood
  2. 2. Implementing Inclusive Interfaces
  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
  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 Reduce Transparency 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 displays
  17. 17. Braille Keyboards
  18. 18. That’s amazing!
  19. 19. Demo: Using VoiceOver
  20. 20. Physical / Motor skills
  21. 21. Assistive Touch
  22. 22. New in iOS 9! Touch Accommodation Hold Duration Tap Assistance
  23. 23. Switch Control
  24. 24. Demo: Switch Control
  25. 25. Learning Difficulties
  26. 26. Guided Access
  27. 27. How does Guided Access work?
  28. 28. Hearing
  29. 29. Hearing Aids LED Flash Mono Audio Noise Cancellation Audio Balance Subtitles & Captioning
  30. 30. Implementing Inclusive Interfaces
  31. 31. Accessibility APIs Classes: UIAccessibilityElement UIAccessibilityCustomAction Informal Protocols: UIAccessibility UIAccessibilityAction UIAccessibilityContainer UIAccessibilityFocus Protocols: UIAccessibilityReadingContent UIAccessibilityIdentification
  32. 32. Basics of the Accessibility APIs
  33. 33. isAccessibilityElement sendButton.isAccessibliltyElement = YES;
  34. 34. VoiceOver: Describe the element Label: Invert Colours - Off Hint: Double-tap to toggle setting Label: Vision Trait: Heading
  35. 35. 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
  36. 36. 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; }
  37. 37. UIAccessibilityTraitNone; UIAccessibilityTraitButton; UIAccessibilityTraitLink; UIAccessibilityTraitSearchField; UIAccessibilityTraitImage; UIAccessibilityTraitSelected; UIAccessibilityTraitPlaysSound; UIAccessibilityTraitKeyboardKey; UIAccessibilityTraitStaticText; UIAccessibilityTraitSummaryElement; UIAccessibilityTraitNotEnabled; UIAccessibilityTraitUpdatesFrequently; UIAccessibilityTraitStartsMediaSession; UIAccessibilityTraitAdjustable; UIAccessibilityTraitAllowsDirectInteraction; UIAccessibilityTraitCausesPageTurn; UIAccessibilityTraitHeader;
  38. 38. 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”
  39. 39. - Enable accessibility - Fill out Label and Hint - Add traits
  40. 40. Testing
  41. 41. Simulator - Accessibility Inspector
  42. 42. Testing VoiceOver on a device
  43. 43. Siri - turn VoiceOver on
  44. 44. Screen curtain Three-finger triple-tap on the screen
  45. 45. Accessibility shortcut Triple-tap the home button
  46. 46. Testing Switch Control on a device
  47. 47. Inclusive User Experience
  48. 48. Make it functional.
  49. 49. Step 1: Make a list of essential user stories / features.
  50. 50. Step 2: Test each feature, recording the results as you go.
  51. 51. Step 3: Fix it until it’s functional.
  52. 52. Case study: Gift Finder by notonthehighstreet.com
  53. 53. 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.
  54. 54. A user can view all details about a product.
  55. 55. A user can view all details about a product.
  56. 56. A user can view all details about a product.
  57. 57. A user can view all details about a product.
  58. 58. A user can view all details about a product.
  59. 59. Testing results: Highlight what’s read out.
  60. 60. Testing results: Highlight what’s read out.
  61. 61. Testing results: Highlight what’s read out.
  62. 62. Testing results: Highlight what’s read out.
  63. 63. Testing results: Block out anything not enabled.
  64. 64. Testing results: Block out anything not enabled.
  65. 65. Testing results: Block out anything not enabled.
  66. 66. Testing results: Block out anything not enabled.
  67. 67. Add your testing results to source control.
  68. 68. Fix any elements that are not working.
  69. 69. - (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”
  70. 70. Fix it until it’s functional.
  71. 71. Adding polish
  72. 72. - (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”
  73. 73. Find out if user has VoiceOver on BOOL isVoiceOverOn = UIAccessiblityIsVoiceOverRunning():
  74. 74. Moving VoiceOver focus UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, self.goButton);
  75. 75. Direct Interaction - (UIAccessibilityTraits)accessibilityTraits { return UIAccessibilityTraitAllowsDirectInteraction; }
  76. 76. Localization and VoiceOver - (NSString *)accessibilityLabel { return NSLocalizedString(@"titleLabelText", nil); } titleLabel.accessibilityLabel = NSLocalizedString(@"titleLabelText", nil); //OR
  77. 77. Accessibility notifications UIAccessibilityPostNotification(NAME, PARAMETER); (UIAccessibilityPageScrolledNotification, @”Top of list”) (UIAccessibilityAnnouncementNotification, @”New message”) (UIAccessbilityLayoutChangedNotification, NSString or UIView) etc...
  78. 78. 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
  79. 79. Magic Tap Two-finger double-tap - (BOOL)accessibilityPerformMagicTap { [self doAwesomeThing]; return YES; }
  80. 80. Getting back two-finger, scrub back and forth - (BOOL)accessibilityPerformEscape { // Dismiss your view
 return YES; }
  81. 81. Modal presentation @property(nonatomic) BOOL accessibilityViewIsModal
  82. 82. Reduce transparency UIAccessibilityIsReduceTransparencyEnabled() Reduce motion UIAccessibilityIsReduceMotionEnabled()
  83. 83. 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]; }
  84. 84. 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
  85. 85. Adding support for Switch Control UIAccessibilityNotificationSwitchControlIdentifier New in iOS 8:
  86. 86. Pause and Resume SwitchControl: UIAccessibilityPauseAssistiveTechnologyNotification UIAccessibilityResumeAssistiveTechnologyNotification
  87. 87. Adding Guided Access support UIGuidedAccessRestrictionDelegate
  88. 88. Homework!
  89. 89. Spend a whole day with VoiceOver or Switch Control #1
  90. 90. Don’t make assumptions. #2
  91. 91. Where should you start? Make it functional! #3
  92. 92. Iterate & polish #4
  93. 93. Make it a requirement not a feature. #5
  94. 94. 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
  95. 95. Thank you! Sally Shepard // @mostgood

×