Implementing Inclusive Interfaces
1 like647 views
The document outlines the importance and methods of implementing inclusive interfaces in software design, focusing on accessibility features for users with disabilities. It discusses various accessibility tools and techniques, such as VoiceOver, assistive touch, and accessibility APIs to enhance user experiences. Additionally, it emphasizes the significance of testing and iterating on features to ensure functionality and usability for all users.
![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;
}](https://image.slidesharecdn.com/sbhyxqpqjm49mi4cqfj3-signature-df5dab6739766ffa6ddff32ced054161f6df91e6581ccd9441434f32e1db22ba-poli-151027114953-lva1-app6891/85/Implementing-Inclusive-Interfaces-37-320.jpg)
![- (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”](https://image.slidesharecdn.com/sbhyxqpqjm49mi4cqfj3-signature-df5dab6739766ffa6ddff32ced054161f6df91e6581ccd9441434f32e1db22ba-poli-151027114953-lva1-app6891/85/Implementing-Inclusive-Interfaces-72-320.jpg)
![- (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”](https://image.slidesharecdn.com/sbhyxqpqjm49mi4cqfj3-signature-df5dab6739766ffa6ddff32ced054161f6df91e6581ccd9441434f32e1db22ba-poli-151027114953-lva1-app6891/85/Implementing-Inclusive-Interfaces-75-320.jpg)
![Magic Tap
Two-finger double-tap
- (BOOL)accessibilityPerformMagicTap
{
[self doAwesomeThing];
return YES;
}](https://image.slidesharecdn.com/sbhyxqpqjm49mi4cqfj3-signature-df5dab6739766ffa6ddff32ced054161f6df91e6581ccd9441434f32e1db22ba-poli-151027114953-lva1-app6891/85/Implementing-Inclusive-Interfaces-82-320.jpg)
![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];
}](https://image.slidesharecdn.com/sbhyxqpqjm49mi4cqfj3-signature-df5dab6739766ffa6ddff32ced054161f6df91e6581ccd9441434f32e1db22ba-poli-151027114953-lva1-app6891/85/Implementing-Inclusive-Interfaces-86-320.jpg)
Implementing Inclusive Interfaces
- 1. Implementing Inclusive Interfaces Sally Shepard // @mostgood
- 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.
- 7. interface |ˈɪntəәfeɪs| noun a device or program enabling a user to communicate with a computer.
- 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
- 18. That’s amazing!
- 21. Assistive Touch
- 22. New in iOS 9! Touch Accommodation Hold Duration Tap Assistance
- 23. Switch Control
- 27. Guided Access
- 28. How does Guided Access work?
- 29. Hearing
- 30. Hearing Aids LED Flash Mono Audio Noise Cancellation Audio Balance Subtitles & Captioning
- 33. Basics of the Accessibility APIs
- 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; }
- 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
- 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():
- 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
- 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:
- 91. Homework!
- 92. Spend a whole day with VoiceOver or Switch Control #1
- 94. Where should you start? Make it functional! #3
- 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