debugging accessibility @ craft conf
TRANSCRIPT
DEBUGGING ACCESSIBILITY
SALLY SHEPARD @MOSTGOOD
-QUICK INTRO TO ACCESSIBILITY -MANUAL DEBUGGING -ACCESSIBILITY INSPECTOR -UI TESTING -ACCESSIBILITY & WORKFLOW
QUICK INTRO TO ACCESSIBILITY
THE RELATIONSHIP BETWEEN ACCESSIBILITY & 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
PEOPLE HAVE IMPAIRMENTS, IMPAIRMENTS AREN’T THE
SAME AS A DISABILITY.
DISABILITY ONLY EXISTS IF THERE IS NO WAY FOR A PERSON TO BE
INCLUDED.
☹
😀
ACCESSIBILITY IS ABOUT ENABLING PEOPLE.
ACCESSIBILITY IS ABOUT ENABLING PEOPLE
BY REMOVING BARRIERS.
IF YOUR APP ISN’T ACCESSIBLE, YOU ARE CREATING BARRIERS,
YOU’RE MAKING A USERS IMPAIRMENT A DISABILITY.
YOU CAN REMOVE BARRIERS BY SUPPORTING ACCESSIBILITY
FEATURES.
ACCESSIBILITY IS NOT JUST VOICEOVER.
https://www.microsoft.com/en-us/design/inclusive
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
MANUAL TESTING IN XCODE-LOG OUT ACCESSIBILITY INFO -DEBUG VIEW HIERARCHY
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
TESTING & DEBUGGING WITH THE ACCESSIBILITY INSPECTOR
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
*DEMO*
TESTING & DEBUGGING WITH UI TESTING
UI TESTING IN XCODE RELIES ON ACCESSIBILITY ELEMENTS.
IF YOUR APP IS NOT UI TESTABLE, IT’S BECAUSE IT HAS POOR
ACCESSIBILITY DATA.
UI TESTABLE == ACCESSIBLE?
UI TESTING DOESN’T GUARANTEE ACCESSIBILITY.
UI TESTING CAN BE HELPFUL FOR SUPPORTING VOICEOVER (AND SWITCH CONTROL TO AN EXTENT)
BUT ACCESSIBILITY IS NOT JUST VOICEOVER.
*DEMO*
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
IF IT’S NOT ACCESSIBLE, IT’S NOT DONE.
DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.
THANK YOU!@MOSTGOOD
QUESTIONS?@MOSTGOOD