Implementing Inclusive

InterfacesSally 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 Motion On/Off Labels

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 APIsClasses: UIAccessibilityElement UIAccessibilityCustomAction

Informal Protocols: UIAccessibility UIAccessibilityAction UIAccessibilityContainer UIAccessibilityFocus

Protocols: UIAccessibilityReadingContent UIAccessibilityIdentification

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 definitely need to specify this! - Don’t include the control type

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

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

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”

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

Testing

Simulator - Accessibility Inspector

Testing VoiceOver on a device

Siri - turn VoiceOver on

Screen curtainThree-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 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.

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: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”

Fix it until it’s functional.

Adding polish

- (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”

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); }

titleLabel.accessibilityLabel = NSLocalizedString(@"titleLabelText", nil);

//OR

Accessibility notifications

UIAccessibilityPostNotification(NAME, PARAMETER);

(UIAccessibilityPageScrolledNotification, @”Top of list”) (UIAccessibilityAnnouncementNotification, @”New message”) (UIAccessbilityLayoutChangedNotification, NSString or UIView) etc...

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

Magic TapTwo-finger double-tap

- (BOOL)accessibilityPerformMagicTap { [self doAwesomeThing];

return YES; }

Getting backtwo-finger, scrub back and forth

- (BOOL)accessibilityPerformEscape { // Dismiss your viewreturn YES; }

Modal presentation

@property(nonatomic) BOOL accessibilityViewIsModal

Reduce transparency

UIAccessibilityIsReduceTransparencyEnabled()

Reduce motion

UIAccessibilityIsReduceMotionEnabled()

Custom ActionsUIAccessibilityCustomAction

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]; }

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

Adding support for Switch Control

UIAccessibilityNotificationSwitchControlIdentifier

New in iOS 8:

Pause and Resume SwitchControl:

UIAccessibilityPauseAssistiveTechnologyNotification

UIAccessibilityResumeAssistiveTechnologyNotification

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

ResourcesTesting 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

Thank you!Sally Shepard // @mostgood