debugging accessibility @ craft conf

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