implementing inclusive interfaces in ios

Implementing Inclusive

Interfaces in iOSSally Shepard // @mostgood

Implementing

Inclusive Interfaces in iOS

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 in iOS

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

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 Keyboards

That’s amazing!

Demo: Using VoiceOver

Physical / Motor skills

Assistive Touch

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 in iOS

Basics of the Accessibility APIs

isAccessibilityElement

sendButton.isAccessibliltyElement = YES;

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

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”

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;

accessibilityValue - Used when a element has a dynamic value

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

Testing

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

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

Adding polish

Find out if user has VoiceOver on

BOOL isVoiceOverOn = UIAccessiblityIsVoiceOverRunning():

Moving VoiceOver focus

UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, self.goButton);

Ignore an accessibility element

UIButton *notThisButton = [UIButton ... ];

[notThisButton setAccessibilityTraits:UIAccessibilityTraitNone];

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

Adding support for Switch Control

UIAccessibilityNotificationSwitchControlIdentifier

New in iOS 8:

Pause and Resume SwitchControl:

UIAccessibilityPauseAssistiveTechnologyNotification

UIAccessibilityResumeAssistiveTechnologyNotification

Adding Guided Access support

UIGuidedAccessRestrictionDelegate

Things to do:

Spend a whole day with VoiceOver or

Switch Control

#1

I want you to feel frustrated.

😧

Don’t make assumptions.

#2

Where should you start? Label and enable all

elements.

#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 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

bit.ly/inclusivetools

Thank you!Sally Shepard // @mostgood

Feedback is important to us Please text @T08 to 39242