iOS Accessibility, Inside & Out

Slide 1

Slide 1 text

ACCESSIBILITY, INSIDE & OUT SOMMER PANAGE (@SOMMER)

Slide 2

Slide 2 text

ACCESSIBILITY & YOU PART 1

Slide 3

Slide 3 text

ACCESSIBILITY MEANS “USING TECHNOLOGY TO OVERCOME CHALLENGES.” Apple

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

VOICEOVER DEMO HTTPS://YOUTU.BE/C0NVDIRDEHW?T=32S

Slide 7

Slide 7 text

HOW DO I SUPPORT MY VISUALLY IMPAIRED USERS? A good developer AS A DEVELOPER…

Slide 8

Slide 8 text

VISION VOICEOVER ▸ UIAccessibility APIs such as accessibilityLabel ▸ Avoid images with text ▸ Label all images ▸ Provide equal experiences

Slide 9

Slide 9 text

44 minutes ago One nice thing about 2013 has been not having to hear Pumped Up Kicks very often. At rooland. Reply Retweet Favorite Jordan Kay At underscore Jordan Proﬁle Picture

Slide 10

Slide 10 text

“Jordan Kay. At Underscore Jordan. 44 minutes ago. One nice thing about 2013 has been not having to hear Pumped Up Kicks very often. Dash. At Roooooland. Two-ﬁnger double-tap for tweet actions.”

Slide 11

Slide 11 text

VISION COLOR AND FONTS ▸ Always use Dynamic Type for everything ▸ Tap targets should be no smaller than 44x44 points ▸ All text should have a minimum contrast ratio of 4.5:1 (http:// webaim.org/resources/contrastchecker/) ▸ Keep color schemes simple ▸ Never indicate meaningful content with color alone

Slide 12

Slide 12 text

HOW DO I SUPPORT USERS WITH HEARING, MOTOR OR OTHER CHALLENGES? A good developer AS A DEVELOPER…

Slide 13

Slide 13 text

OTHER CHALLENGES CAPTIONING AND SOUND ▸ All audio/video content should provide optional captioning ▸ Never signal anything with sound alone ▸ Avoid background music/sound and make any background sound easy to disable

Slide 14

Slide 14 text

OTHER CHALLENGES TOUCH AND COGNITION ▸ Avoid complex / hard to discover gestures ▸ Again, keep touch target sizes at/above 44x44 points ▸ Test your interface using switch control; a simple, hierarchical interface will play well with switch control ▸ Avoid screen clutter - favor navigation to clutter

Slide 15

Slide 15 text

EXAMPLES MEDIUM — NOT GREAT ▸ Tabs aren’t labled ▸ Swipe items behind cells are “visible” to VO ▸ Grouping of items is poor ▸ Compose items aren’t labeled ▸ Doesn’t respond to back gesture. ▸ And much more…

Slide 16

Slide 16 text

EXAMPLES SPOTIFY — GOOD! ▸ Buttons are well labeled ▸ Grouping of content makes sense ▸ Navigation of music control is clear ▸ Buttons provide context to their behaviors when non-obvious

Slide 17

Slide 17 text

RESOURCES APPLE PROVIDES AMAZING #A11Y RESOURCES TO DEVS HTTPS://DEVELOPER.APPLE.COM/ACCESSIBILITY/

Slide 18

Slide 18 text

IOS ACCESSIBILITY BASICS* PART 2 * And a few other cool things

Slide 19

Slide 19 text

IOS ACCESSIBILITY BASICS UIACCESSIBILITY ▸ An extension on NSObject (in Swift) ▸ An category on NSObject (in ObjC) ▸ Every NSObject has accessibility properties ▸ Contains the most frequently used bits of accessibility

Slide 20

Slide 20 text

IOS ACCESSIBILITY BASICS IS ACCESSIBILITY ELEMENT? ▸ isAccessibilityElement defaults to NO for everything except UIControl objects and labels/text ▸ Setting to NO tells the Accessibility system recursively look at this elements subelements to ﬁnd something that is accessible.

Slide 21

Slide 21 text

IOS ACCESSIBILITY BASICS ACCESSIBILITY LABEL ▸ Static information about a view ▸ A description of the view in (few) words. ▸ Defaults to the text already present (but sometimes this isn’t enough) CHRISCONNOLY REFRESH 9 MINUTES AGO

Slide 22

Slide 22 text

refreshButton.accessibilityLabel = "Refresh";

Slide 23

Slide 23 text

IOS ACCESSIBILITY BASICS ACCESSIBILITY VALUE ▸ Dynamic information about a view ▸ Should never be the same as the label ▸ Should never be used to store “debug information” AIRPLANE MODE ON TRACK POSITION 1 MINUTE 17 SECONDS OF 4 MINUTES 45 SECONDS

Slide 24

Slide 24 text

func sliderValueDidUpdate() { // Update standard UI let percentage: Int = lroundf(volumeSlider.value * 100) volumeSlider.accessibilityValue = "\(percentage) percent" }

Slide 25

Slide 25 text

IOS ACCESSIBILITY BASICS ACCESSIBILITY HINT ▸ Provides additional information if the effect of interacting with the view is non-obvious ▸ Explains how to use costume / power-user gestures ▸ Can be disabled by users, so shouldn’t contain required content SOUND VOLUME 45 PERCENT. ADJUSTABLE. SWIPE UP OR DOWN WITH ONE FINGER TO ADJUST THE VALUE

Slide 26

Slide 26 text

volumeSlider.accessibilityLabel = “Sound volume” volumeSlider.accessibilityHint = “Swipe up or down with one finger to adjust the value.” *Note! The adjustable hint is added automatically by iOS for items with the adjustable trait.

Slide 27

Slide 27 text

IOS ACCESSIBILITY BASICS ACCESSIBILITY TRAITS ▸ Traits modify how the system interacts with an elements ▸ Button trait will add the word “button” to the label of your element ▸ Link trait will add the word “link” to the label of of your element ▸ Summary trait tells VO where to go when the app launches

Slide 28

Slide 28 text

IOS ACCESSIBILITY BASICS MORE ON ACCESSIBILITY TRAITS ▸ Traits are a bitmask and can be combined. ▸ Modifying traits in UIControls should always be done with |= unless you explicitly want to override a behavior ▸ Some traits have corresponding actions such as UIAccessibilityTraitAdjustable.

Slide 29

Slide 29 text

// Help profile button takes user to Safari to view help topics helpButton.accessibilityTraits |= UIAccessibilityTraitLink

Slide 30

Slide 30 text

ACCESSIBILITY ACTIONS ACCESSIBILITY ACTIONS ▸ The general way you handle any VO speciﬁc gesture ▸ Built in iOS support means much less work and implementing a custom gesture yourself (AVOID THIS)

Slide 31

Slide 31 text

ACCESSIBILITY ACTIONS ESCAPE GESTURE ▸ A z-shape with two ﬁngers ▸ Apps with a default nav bar will go back with this gesture ▸ Modals should dismiss with this gesture ▸ Generally maps to any “BACK” or “CLOSE” or “DISMISS”

Slide 32

Slide 32 text

ACCESSIBILITY ACTIONS MAGIC TAP GESTURE ▸ A double tap with two ﬁngers ▸ In Springboard, this will play/pause music ▸ Generally maps to most common action in an App ▸ In Twitter, was conﬁgurable in settings to either offer Tweet Actions or go to Compose.

Slide 33

Slide 33 text

ACCESSIBILITY ACTIONS MORE ACTIONS ▸ accessibilityIncrement and accessibilityDecrement for any object with an adjustableTrait (single ﬁnger swipe up/down) ▸ accessibilityActivate is the default double-tap action. Only need to override if you are NOT behaving as a non-VO tap would ▸ accessibilityScroll handles a 3 ﬁnger swipe to trigger scrolling (generally)

Slide 34

Slide 34 text

LET’S MOVE BEYOND THE BASICS…

Slide 35

Slide 35 text

BEYOND THE BASICS SPECIAL UIKIT DELEGATES ▸ UIPickerView and UIScrollView have speciﬁc accessibility delegates ▸ UIPickerViewAccessibilityDelegate lets you a label/hint for each item in your picker. ▸ Useful for pickers with images ▸ Useful for pickers with numbers that might need more context ▸ UIScrollViewAccessibilityDelegate let’s you control the status update as your scroll view scrolls. ▸ “Tweets 1 to 20 out of 300”

Slide 36

Slide 36 text

BEYOND THE BASICS ▸ You can use attributed strings to control how VO speaks text. ▸ UIAccessibilitySpeechAttributePunctuation pronounces all punctuation (great for reading code) ▸ UIAccessibilitySpeechAttributeLanguage controls the language of VO ▸ Useful when content is tagged with language ▸ UIAccessibilitySpeechAttributePitch modulate VO’s pitch ▸ Useful to convey system action such as “post deleted” ▸ Useful to differentiate content in long strings ATTRIBUTED STRINGS

Slide 37

Slide 37 text

BEYOND THE BASICS ▸ Call UIAccessibilityPostNotification to post announcements and notifications ▸ UIAccessibilityLayoutChangedNotification and UIAccessibilityScreenChangedNotification trigger the system to rebuild the Accessibility tree ▸ UIAccessibilityAnnouncementNotification let’s you make an announcement to the user without user action ▸ “Refreshing content” ▸ “Notification received” NOTIFICATIONS

Slide 38

Slide 38 text

BEYOND THE BASICS AND THERE’S MORE! ▸ Custom Accessibility for non-UIView based UI (UIAccessibilityContainer is the old solution) ▸ Dig around in the headers! ▸ UIAccessibility.h ▸ UIAccessibilityConstants.h ▸ UIAccessibilityZoom.h ▸ UIAccessibilityAdditions.h ▸ UIAccessibilityIdentiﬁcation.h (for automation purposes)

Slide 39

Slide 39 text

WHAT’S NEW IN IOS ACCESSIBILITY? PART 3

Slide 40

Slide 40 text

WHAT’S NEW IN IOS ACCESSIBILITY? SIMPLIFYING THE COMPLEXITY ▸ Interfaces are becoming more dynamic and gesturally-driven ▸ iOS 8 marked the point at which accessibility caught up with these trends ▸ More support for custom behaviors ▸ More support for accessibility tools beyond VoiceOver (such as switch systems)

Slide 41

Slide 41 text

WHAT’S NEW IN IOS ACCESSIBILITY? ACCESSIBILITY ACTIONS ▸ Before ▸ When objects had gesture-based actions such as ﬂicks or swipes, we had to create custom tap-based gestures for our users on VO ▸ After ▸ We can now wrap these actions into the accessibilityCustomActions property on a view and VO will give the user direct access

Slide 42

Slide 42 text

ACCESSIBILITY ACTIONS EXAMPLE: REMINDERS APP Swipe

Slide 43

Slide 43 text

ACCESSIBILITY ACTIONS EXAMPLE: REMINDERS APP

Slide 44

Slide 44 text

ACCESSIBILITY ACTIONS EXAMPLE: REMINDERS APP BUY A SPATULA. DOUBLE-TAP TO EDIT DETAILS. SWIPE UP OR DOWN TO SELECT A CUSTOM ACTION.THEN DOUBLE-TAP TO ACTIVATE. BUY A SPATULA. DOUBLE-TAP TO EDIT DETAILS. ACTIONS AVAILABLE. …Or…

Slide 45

Slide 45 text

WHAT’S NEW IN IOS ACCESSIBILITY? ACCESSIBILITY CONTAINERS ▸ Before ▸ Making custom drawing and non-UIKit objects accessible on screen meant implementing the somewhat buggy and heavy-anded Accessibility Container Protocol ▸ After ▸ Any view can simply set an accessibilityElements array to deﬁne objects within it that should be accessible

Slide 46

Slide 46 text

ACCESSIBILITY CONTAINERS EXAMPLE: HEALTH APP ▸ The graph is clearly not rendered via UIViews ▸ How do we provide information to the user about what is contained in this graph?

Slide 47

Slide 47 text

ACCESSIBILITY CONTAINERS EXAMPLE: HEALTH APP

Slide 48

Slide 48 text

ACCESSIBILITY CONTAINERS EXAMPLE: HEALTH APP WEIGHT. 129.2 POUNDS. DAILY AVERAGE 129.07. LAST UPDATED. OCTOBER 30TH, 2015.

Slide 49

Slide 49 text

ACCESSIBILITY CONTAINERS EXAMPLE: HEALTH APP 129 POUNDS. MAY 16TH.

Slide 50

Slide 50 text

WHAT’S NEW IN IOS ACCESSIBILITY? SWITCH CONTROL…CONTROL ▸ Before ▸ When switch support on iOS was introduced, it depended only on accessibility already present via VO. ▸ After ▸ Using accessibilityNavigationStyle, you can now control how the focus selects elements ▸ Switches also interface with any accessibilityCustomActions you add

Slide 51

Slide 51 text

SWITCH CONTROL DEMO

Slide 52

Slide 52 text

WHAT’S NEW IN IOS ACCESSIBILITY? MORE CUSTOMIZATION BASED ON DEVICE STATE ▸ Before ▸ Impossible to tell what AX features were in use. ▸ After ▸ Notiﬁcations and state checking functions for when the device enters/leaves various accessibility modes such as grayscale, reduced transparency, color inversion, and more. ▸ Allows you to change the appearance of your app, if necessary, given these modes

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

WHAT’S NEW IN IOS ACCESSIBILITY? BACKWARDS COMPATIBILITY RECOMMENDATIONS ▸ Accessibility Actions ▸ For pre iOS 8, you should still provide a custom gesture and a hint to help that user ﬁnd said gesture ▸ Often a good solution is using accessibilityPerformMagicTap to trigger an action sheet ▸ Containers ▸ Stick to old UIAccessibilityContainer Protocol until you drop iOS 7 support