implementing inclusive interfaces in ios
TRANSCRIPT
![Page 2: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/2.jpg)
Implementing
Inclusive Interfaces in iOS
![Page 3: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/3.jpg)
accessible |əkˈsɛsɪb(ə)l| adjective able to be reached, entered, or used by people who have a disability.
![Page 4: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/4.jpg)
disability?
![Page 5: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/5.jpg)
inclusive |ɪnˈkluːsɪv| adjective not excluding any section of society or any party involved in something.
![Page 6: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/6.jpg)
Implementing Inclusive
Interfaces in iOS
![Page 7: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/7.jpg)
interface |ˈɪntəәfeɪs| noun a device or program enabling a user to communicate with a computer.
![Page 8: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/8.jpg)
interface != GUI
![Page 9: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/9.jpg)
Vision
![Page 10: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/10.jpg)
VoiceOver Zoom
Invert Colors Greyscale Larger Text
Bold Text Button Shapes
Increase Contrast Reduce Motion On/Off Labels
![Page 11: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/11.jpg)
VoiceOver replicates the GUI by speaking it.
![Page 12: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/12.jpg)
VoiceOver speaks more than 30 languages
![Page 13: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/13.jpg)
Available on iOS, OS X, Apple TV
& Apple Watch
![Page 14: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/14.jpg)
To extend VoiceOver, users can also use braille.
![Page 15: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/15.jpg)
Braille displays
![Page 16: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/16.jpg)
Braille Keyboards
![Page 17: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/17.jpg)
That’s amazing!
![Page 18: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/18.jpg)
Demo: Using VoiceOver
![Page 19: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/19.jpg)
Physical / Motor skills
![Page 20: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/20.jpg)
Assistive Touch
![Page 21: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/21.jpg)
Switch Control
![Page 22: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/22.jpg)
![Page 23: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/23.jpg)
Demo: Switch Control
![Page 24: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/24.jpg)
Learning Difficulties
![Page 25: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/25.jpg)
Guided Access
![Page 26: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/26.jpg)
How does Guided Access work?
![Page 27: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/27.jpg)
Hearing
![Page 28: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/28.jpg)
Hearing Aids LED Flash
Mono Audio Noise Cancellation
Audio Balance Subtitles & Captioning
![Page 29: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/29.jpg)
Implementing Inclusive
Interfaces in iOS
![Page 30: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/30.jpg)
Basics of the Accessibility APIs
![Page 31: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/31.jpg)
isAccessibilityElement
sendButton.isAccessibliltyElement = YES;
![Page 32: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/32.jpg)
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
![Page 33: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/33.jpg)
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”
![Page 34: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/34.jpg)
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; }
![Page 35: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/35.jpg)
UIAccessibilityTraitNone; UIAccessibilityTraitButton; UIAccessibilityTraitLink; UIAccessibilityTraitSearchField; UIAccessibilityTraitImage; UIAccessibilityTraitSelected; UIAccessibilityTraitPlaysSound; UIAccessibilityTraitKeyboardKey; UIAccessibilityTraitStaticText; UIAccessibilityTraitSummaryElement; UIAccessibilityTraitNotEnabled; UIAccessibilityTraitUpdatesFrequently; UIAccessibilityTraitStartsMediaSession; UIAccessibilityTraitAdjustable; UIAccessibilityTraitAllowsDirectInteraction; UIAccessibilityTraitCausesPageTurn; UIAccessibilityTraitHeader;
![Page 36: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/36.jpg)
accessibilityValue - Used when a element has a dynamic value
![Page 37: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/37.jpg)
- Enable accessibility - Fill out Label and Hint - Add traits
![Page 38: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/38.jpg)
Testing
![Page 39: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/39.jpg)
Accessibility Inspector
![Page 40: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/40.jpg)
Testing VoiceOver on a device
![Page 41: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/41.jpg)
Siri - turn VoiceOver on
![Page 42: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/42.jpg)
Screen curtainThree-finger triple-tap on the screen
![Page 43: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/43.jpg)
Accessibility shortcut
Triple-tap the home button
![Page 44: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/44.jpg)
Testing Switch Control on a device
![Page 45: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/45.jpg)
Inclusive User Experience
![Page 46: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/46.jpg)
![Page 47: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/47.jpg)
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
![Page 48: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/48.jpg)
Adding polish
![Page 49: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/49.jpg)
Find out if user has VoiceOver on
BOOL isVoiceOverOn = UIAccessiblityIsVoiceOverRunning():
![Page 50: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/50.jpg)
Moving VoiceOver focus
UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, self.goButton);
![Page 51: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/51.jpg)
Ignore an accessibility element
UIButton *notThisButton = [UIButton ... ];
[notThisButton setAccessibilityTraits:UIAccessibilityTraitNone];
![Page 52: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/52.jpg)
Direct Interaction
- (UIAccessibilityTraits)accessibilityTraits { return UIAccessibilityTraitAllowsDirectInteraction; }
![Page 53: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/53.jpg)
Localization and VoiceOver
- (NSString *)accessibilityLabel { return NSLocalizedString(@"titleLabelText", nil); }
titleLabel.accessibilityLabel = NSLocalizedString(@"titleLabelText", nil);
//OR
![Page 54: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/54.jpg)
Accessibility notifications
UIAccessibilityPostNotification(NAME, PARAMETER);
(UIAccessibilityPageScrolledNotification, @”Top of list”) (UIAccessibilityAnnouncementNotification, @”New message”) (UIAccessbilityLayoutChangedNotification, NSString or UIView) etc...
![Page 55: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/55.jpg)
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
![Page 56: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/56.jpg)
Magic TapTwo-finger double-tap
- (BOOL)accessibilityPerformMagicTap { [self doAwesomeThing];
return YES; }
![Page 57: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/57.jpg)
Getting backtwo-finger, scrub back and forth
- (BOOL)accessibilityPerformEscape { // Dismiss your viewreturn YES; }
![Page 58: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/58.jpg)
Modal presentation
@property(nonatomic) BOOL accessibilityViewIsModal
![Page 59: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/59.jpg)
Adding support for Switch Control
UIAccessibilityNotificationSwitchControlIdentifier
New in iOS 8:
![Page 60: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/60.jpg)
Pause and Resume SwitchControl:
UIAccessibilityPauseAssistiveTechnologyNotification
UIAccessibilityResumeAssistiveTechnologyNotification
![Page 61: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/61.jpg)
Adding Guided Access support
UIGuidedAccessRestrictionDelegate
![Page 62: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/62.jpg)
Things to do:
![Page 63: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/63.jpg)
Spend a whole day with VoiceOver or
Switch Control
#1
![Page 64: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/64.jpg)
I want you to feel frustrated.
😧
![Page 65: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/65.jpg)
Don’t make assumptions.
#2
![Page 66: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/66.jpg)
Where should you start? Label and enable all
elements.
#3
![Page 67: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/67.jpg)
Iterate & polish
#4
![Page 68: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/68.jpg)
Make it a requirement, not a feature.
#5
![Page 69: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/69.jpg)
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
![Page 71: Implementing inclusive interfaces in iOS](https://reader038.vdocuments.us/reader038/viewer/2022102619/55c4c76bbb61eb7b708b4836/html5/thumbnails/71.jpg)
Thank you!Sally Shepard // @mostgood
Feedback is important to us Please text @T08 to 39242