debugging accessibility
TRANSCRIPT
DEBUGGING ACCESSIBILITY
SALLY SHEPARD @MOSTGOOD
CRASH COURSE ON ACCESSIBILITY
WHAT IS ACCESSIBILITY?
the quality of being easily reached, entered or used by
people who have a disability?
“Disability is…a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives.”
-World Health Organisation, definition of disability
“Disability never holds anyone back, disability is not something that people need to overcome. The barriers that exist are created by society.”
-Haben Girma, WWDC 2016: Disability and Innovation: The Universal Benefits
of Accessible Design
PEOPLE HAVE IMPAIRMENTS,
NOT DISABILITIES.
DISABILITY ONLY EXISTS IF THERE IS NO WAY FOR A PERSON TO BE
INCLUDED.
ACCESSIBILITY IS ABOUT ENABLING PEOPLE.
☹
😀
☹
😀
☹
😀?
IF YOUR APP ISN’T ACCESSIBLE, YOU ARE CREATING BARRIERS FOR USERS, YOU’RE MAKING THEIR IMPAIRMENT A DISABILITY.
ACCESSIBILITY IS ABOUT ENABLING PEOPLE BY REMOVING BARRIERS.
WHO USES ACCESSIBILITY?
https://www.microsoft.com/en-us/design/inclusive
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 VOICEOVER.
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.
DEBUGGING ACCESSIBILITY1) KNOWING SOMETHING IS BROKEN 2) FINDING OUT HOW IT’S BROKEN 3) FIX AND RE-TEST
1) KNOWING SOMETHING IS BROKEN
WHAT NEEDS TO BE TESTED?
THERE ARE SO MANY ACCESSIBILITY SETTINGS! 😱
VoiceOver Zoom Invert Colors Greyscale Color Filters Speak Selection/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 Subtitle & Captioning Audio Descriptions Haptic Feedback Guided Access
iOS
VoiceOver Dynamic Type Bold Text Reduce Transparency Reduce Motion Switch Control
Greyscale Invert Colors Subtitle & Captioning Audio Descriptions
iOS
VoiceOver Zoom Invert Colors Greyscale Differentiate without colour Increase Contrast Reduce Transparency Reduce Motion Display contrast Cursor Size
Switch Control Dictation/Siri Dwell Control Keyboard Access
Flash for alerts Mono Audio Subtitles and Captioning Audio Descriptions
macOS
VoiceOver Increase Contrast Reduce Transparency Reduce Motion Switch Control
Differentiate without colour Dictation/Siri Mono Audio Subtitles and Captioning Audio Descriptions
macOS
VoiceOver Zoom Greyscale Dynamic Type Bold Text Reduce Transparency Reduce Motion On/Off Labels
Dictation/Siri Mono Audio Haptic Feedback
watchOS
VoiceOver Dynamic Type Bold Text Reduce Transparency Reduce Motion
Greyscale Mono Audio Haptic Feedback
watchOS
VoiceOver Zoom Invert Colours Colour Filters Light Sensitivity Reduce White Point Bold Text Reduce Transparency Focus Style Reduce Motion
Switch Control Dictation/Siri
Subtitle & Captioning Audio Descriptions
tvOS
VoiceOver Bold Text Reduce Transparency Reduce Motion Switch Control
Greyscale* Subtitle & Captioning Audio Descriptions
tvOS
BROKEN VS. WORKING
VOICEOVER
developer.apple.com/ios/human-interface-guidelines
-FOCUSABLE -LABELED -TRAITS -ACTIONABLE -STATE -CONTEXT
LARGE TEXT
BOLD TEXT
REDUCE TRANSPARENCY
developer.apple.com/ios/human-interface-guidelines
REDUCE MOTION
GREYSCALE
SWITCH CONTROL
-FOCUSABLE -ACTIONABLE -HIERARCHY -GROUPED
2) FINDING OUT HOW IT’S BROKEN
WHO CAN TEST?
DEVELOPERS DESIGNERS PRODUCT PEOPLE QA/TESTERS …EVERYONE!
MANUAL TESTING (ON A DEVICE)
NOTHING IS BETTER THAN MANUAL TESTING.
CAN SPEED UP MANUAL TESTING?
KNOW YOUR 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 SETTINGS.
ACCESSIBILITY INSPECTOR
NEW IN XCODE 8
-ACCESSIBILITY ELEMENT INSPECTION -AUDIT -SETTINGS
ACCESSIBILITY INSPECTOR
HARDWARE OR SIMULATOR
CONTROL SETTINGS ON HARDWARE
“SPY” ON OTHER APPS
DEMO
🤞
AUTOMATED TESTING
UI TESTING USES ACCESSIBILITY INFORMATION
APP NOT UI-TESTABLE BECAUSE: -NOT ACCESSIBLE -POOR ACCESSIBILITY DATA
UI-TESTABLE = ACCESSIBLE?
DOESN’T GUARANTEE ACCESSIBILITY.
VOICEOVER & SWITCH CONTROL
DOESN’T HELP WITH ALL THE OTHER THINGS…
3) FIX IT & RE-TEST
GET REAL USERS INVOLVED!
GET BETA TESTERS WHO USE A VARIETY OF ASSISTIVE TECHNOLOGY.
DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.
THANK YOU!@MOSTGOOD
QUESTIONS?@MOSTGOOD
DEBUGGING SUGGESTIONS?
@MOSTGOOD