iOS Accessibility Workshop Global Accessibility Awareness Day 2017
iOS Accessibility Workshop
Global Accessibility Awareness Day 2017
WHAT IS ACCESSIBILITY?
ACCESSIBILITY IS ABOUT ENABLING PEOPLE
BY REMOVING BARRIERS.
YOU CAN REMOVE BARRIERS BY SUPPORTING ACCESSIBILITY
FEATURES.
ACCESSIBILITY AND DISABILITY?
https://www.microsoft.com/en-us/design/inclusive
WE NEED TO STOP MAKING ASSUMPTIONS
Users with Visual Impairments
VoiceOver Users
What we assume
(Blind users)
Users with Visual Impairments
VoiceOver Users
For illustration purposes only, not necessarily accurate of the number of users.
What’s more likely
Users with Visual Impairments
VoiceOver Users
Large Text Users
For illustration purposes only, not necessarily accurate of the number of users.
Users with Visual Impairments
VoiceOver Users
Large Text Users
Increase Contrast Users
For illustration purposes only, not necessarily accurate of the number of users.
Users with Visual Impairments
VoiceOver Users
Large Text Users
Increase Contrast Users Bold Text Users
For illustration purposes only, not necessarily accurate of the number of users.
Users with Visual Impairments VoiceOver
Users
Large Text Users
Increase Contrast Users Bold Text Users
Darken Colours Users
For illustration purposes only, not necessarily accurate of the number of users.
ACCESSIBILITY IS NOT JUST ABOUT PEOPLE WITH VISUAL IMPAIRMENTS.
THERE ARE SO MANY ACCESSIBILITY FEATURES!
VoiceOver Zoom Invert Colors Greyscale Color Filters Speak Screen Dynamic Type Bold Text Button Shapes Reduce Transparency Darken Colours Reduce White Point Reduce Motion
On/Off Labels Switch Control AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts Mono Audio Audio Volume Balance Hearing Aids Phone noise cancellation Subtitles & Captioning
Audio Descriptions Haptic Feedback Guided Access Differentiate without colour Increase Contrast Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
MOST ACCESSIBILITY FEATURES ARE HANDLED BY THE SYSTEM
(NO ADDITIONAL WORK FOR YOU) 🎉 🎉 🎉 🎉 🎉
VoiceOver Zoom Invert Colors Greyscale Color Filters Speak Screen Dynamic Type Bold Text Button Shapes Reduce Transparency Darken Colours Reduce White Point Reduce Motion
On/Off Labels Switch Control AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts Mono Audio Audio Volume Balance Hearing Aids Phone noise cancellation Subtitles & Captioning
Audio Descriptions Haptic Feedback Guided Access Differentiate without colour Increase Contrast Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
VoiceOver Zoom Invert Colors Greyscale Color Filters Speak Screen Dynamic Type Bold Text Button Shapes Reduce Transparency Darken Colours Reduce White Point Reduce Motion
On/Off Labels Switch Control AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts Mono Audio Audio Volume Balance Hearing Aids Phone noise cancellation Subtitles & Captioning
Audio Descriptions Haptic Feedback Guided Access Differentiate without colour Increase Contrast Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
QUITE A FEW ACCESSIBILITY FEATURES
ONLY APPLY TO SOME APPS.
VoiceOver Zoom Invert Colors Greyscale Color Filters Speak Screen Dynamic Type Bold Text Button Shapes Reduce Transparency Darken Colours Reduce White Point Reduce Motion
On/Off Labels Switch Control AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts Mono Audio Audio Volume Balance Hearing Aids Phone noise cancellation Subtitles & Captioning
Audio Descriptions Haptic Feedback Guided Access Differentiate without colour Increase Contrast Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
VoiceOver Zoom *Invert Colors* Greyscale Color Filters Speak Screen Dynamic Type Bold Text Button Shapes Reduce Transparency Darken Colours Reduce White Point Reduce Motion
On/Off Labels Switch Control AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts *Mono Audio* Audio Volume Balance Hearing Aids Phone noise cancellation *Subtitles & Captioning*
*Audio Descriptions* *Haptic Feedback* *Guided Access* Differentiate without colour Increase Contrast Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
A LOT CAN BE HANDLED IN THE DESIGN PHASE.
VoiceOver Zoom *Invert Colors* Greyscale Color Filters Speak Screen Dynamic Type Bold Text Button Shapes Reduce Transparency Darken Colours Reduce White Point Reduce Motion
On/Off Labels Switch Control AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts *Mono Audio* Audio Volume Balance Hearing Aids Phone noise cancellation *Subtitles & Captioning*
*Audio Descriptions* *Haptic Feedback* *Guided Access* Differentiate without colour Increase Contrast Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
VoiceOver Zoom *Invert Colors* *Greyscale* Color Filters Speak Screen Dynamic Type *Bold Text* Button Shapes *Reduce Transparency* *Darken Colours* Reduce White Point *Reduce Motion*
On/Off Labels Switch Control AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts *Mono Audio* Audio Volume Balance Hearing Aids Phone noise cancellation *Subtitles & Captioning*
*Audio Descriptions* *Haptic Feedback* *Guided Access* *Differentiate without colour* *Increase Contrast* Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
VoiceOver Zoom *Invert Colors* *Greyscale* Color Filters Speak Screen Dynamic Type *Bold Text* Button Shapes *Reduce Transparency* *Darken Colours* Reduce White Point *Reduce Motion*
On/Off Labels Switch Control AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts *Mono Audio* Audio Volume Balance Hearing Aids Phone noise cancellation *Subtitles & Captioning*
*Audio Descriptions* *Haptic Feedback* *Guided Access* *Differentiate without colour* *Increase Contrast* Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
RELATIONSHIP BETWEEN VOICEOVER AND SWITCH CONTROL
-ACCESSIBILITY API -ACCESSIBILITY ELEMENTS
VoiceOver Zoom *Invert Colors* *Greyscale* Color Filters Speak Screen Dynamic Type *Bold Text* Button Shapes *Reduce Transparency* *Darken Colours* Reduce White Point *Reduce Motion*
On/Off Labels *Switch Control* AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts *Mono Audio* Audio Volume Balance Hearing Aids Phone noise cancellation *Subtitles & Captioning*
*Audio Descriptions* *Haptic Feedback* *Guided Access* *Differentiate without colour* *Increase Contrast* Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
VoiceOver Zoom *Invert Colors* *Greyscale* Color Filters Speak Screen Dynamic Type *Bold Text* Button Shapes *Reduce Transparency* *Darken Colours* Reduce White Point *Reduce Motion*
On/Off Labels *Switch Control* AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts *Mono Audio* Audio Volume Balance Hearing Aids Phone noise cancellation *Subtitles & Captioning*
*Audio Descriptions* *Haptic Feedback* *Guided Access* *Differentiate without colour* *Increase Contrast* Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
~300 MILLION VISUALLY IMPAIRED
DYNAMIC TYPE IS SUPER IMPORTANT TO SUPPORT IN YOUR APPS!
WHAT IF WE CAN’T RELY ON OUR DESIGNS TO SUPPORT
ACCESSIBILITY?
VoiceOver Zoom *Invert Colors* *Greyscale* Color Filters Speak Screen Dynamic Type *Bold Text* Button Shapes *Reduce Transparency* *Darken Colours* Reduce White Point *Reduce Motion*
On/Off Labels *Switch Control* AssistiveTouch Hold Duration Ignore Repeat Tap Assistance Dictation/Siri Flash for alerts *Mono Audio* Audio Volume Balance Hearing Aids Phone noise cancellation *Subtitles & Captioning*
*Audio Descriptions* *Haptic Feedback* *Guided Access* *Differentiate without colour* *Increase Contrast* Display contrast Cursor Size Dwell Control Keyboard Access Light Sensitivity Focus Style
ACCESSIBILITY FEATURES ON iOS/macOS/watchOS/tvOS
DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.
WHY DO WE TAKE PHOTOS?
DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.
MANUAL TESTING & DEBUGGING
MANUAL TESTING ON HARDWARE
*DEMO*
-FOCUSABLE -LABELED -TRAITS
-ACTIONABLE -STATE -CONTEXT
VOICEOVER
MAKING THE MOST OF MANUAL TESTING
RATHER THAN TESTING EVERY ELEMENT ON THE SCREEN,
TEST A FEATURE FROM START TO FINISH.
SIMPLIFY ELEMENTS: GROUP ITEMS & MAKE LARGER TAP
TARGETS.
NOTHING IS BETTER THAN MANUAL TESTING.
MANUAL TESTINGGOOD
✅ COMPREHENSIVEBAD 🕰 SLOW
SPEEDING UP MANUAL TESTING
KNOW YOUR VOICEOVER GESTURES!
http://bit.ly/2nGZLgx
Focus an element Tap
Activate the focused element Double-tap
Double-tap an item Triple-tap
Move focus to the next or previous item Swipe right or left
Adjust a Slider value Swipe up or down
Move through custom actions Swipe up or down
Read all the elements in order, from the top of the screen Two-finger swipe up
Read all the elements in order, from currently focused element
Two-finger swipe down
Stop/resume speaking Two-finger tap
Go back to the previous view or dismiss an alert Two-finger scrub, quickly making a “z”
Scroll by a page in a table view or scroll view Three-finger swipe up or down
Scroll continuously in a table view or scroll view Double-tap and hold until you hear three rising tones, then drag up or down
Go to the next or previous page Three-finger swipe right or left
Speak additional information about the element, such as position within a list or whether text is selected
Three-finger tap
Focus on the first element on the screen Four-finger tap at top of screen
Focus on the last element on the screen Four-finger tap at bottom of screen
Mute or unmute VoiceOver Three-finger double-tap
Magic Tap Two-finger double-tap
Turn Screen Curtain on or off Three-finger triple-tap
Open the Item Chooser Two-finger triple-tap
Change the elements label Two-finger double-tap and hold
Use a standard gesture Double-tap and hold your finger on the screen until you hear three rising tones, then make the gesture. When you lift your finger, VoiceOver gestures resume. For example, to drag a volume slider with your finger instead of swiping up and down, select the slider, double-tap and hold, wait for the three tones, then slide left or right.
Open Notification Center Select any item in the status bar, then swipe down with three fingers
Open Control Center Select any item in the status bar, then swipe up with three fingers
Dismiss Control Center Two-finger scrub, quickly making a “z”
Switch between apps Double-click the Home button to display open apps, swipe left or right with one finger to select an app, then double-tap to switch to it.
Rearrange your Home screen Select an icon on the Home screen, double-tap and hold, then drag. Lift your finger when the icon is in its new location. Drag an icon to the edge of the screen to move it to another Home screen. You can continue to select and move items until you press the Home button.
2-FINGER SWIPE UP
READ CONTENTS OF SCREEN IN ORDER
FROM THE TOP
COMBINE DISPLAY ACCOMMODATION SETTINGS.Greyscale Dynamic Type Bold Text Reduce Transparency Reduce Motion
Differentiate without colour (macOS) Increase Contrast (macOS)
ACCESSIBILITY SHORTCUT!
(AT THE BOTTOM OF THE LIST IN ACCESSIBILITY)
SETTINGS -> GENERAL -> ACCESSIBILITY -> ACCESSIBILITY SHORTCUT
SUPPORT.APPLE.COM/ACCESSIBILITY
ACCESSIBILITY INSPECTOR
*NEW IN XCODE 8*
-ACCESSIBILITY ELEMENT INSPECTION -AUDIT -SETTINGS
ACCESSIBILITY INSPECTOR
WORKS WITH HARDWARE OR THE SIMULATOR
CONTROL SETTINGS ON HARDWARE
“SPY” ON OTHER APPS
MAKE ACCESSIBILITY PART OF YOUR WORKFLOW
A LOT OF ACCESSIBILITY WORK CAN BE DONE IN THE
DESIGN PHASE.
ACCESSIBILITY IS NOT A FEATURE, EVERY FEATURE SHOULD BE
ACCESSIBLE.
IF IT’S NOT ACCESSIBLE, IT’S NOT DONE.
MAKE TESTING FOR ACCESSIBILITY PART OF
YOUR TEST PLAN.
GET REAL USERS INVOLVED!
GET BETA TESTERS WHO USE A VARIETY OF
ASSISTIVE TECHNOLOGIES.
APPLEVIS.COM @APPLEVIS
THINGS TO REMEMBER
KNOW YOUR VOICEOVER GESTURES!
DON’T LET THE SIZE OF WORK DISCOURAGE YOU FROM STARTING IT.
REDUCING COSTS•Move most Accessibility work to design phase •Focus on testing the right things •Work incrementally •Prioritise most important features
DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.