Top Banner
DEBUGGING ACCESSIBILITY SALLY SHEPARD @MOSTGOOD
101

Debugging Accessibility

Jan 21, 2018

Download

Software

Sally Shepard
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Debugging Accessibility

DEBUGGING ACCESSIBILITY

SALLY SHEPARD @MOSTGOOD

Page 2: Debugging Accessibility

CRASH COURSE ON ACCESSIBILITY

Page 3: Debugging Accessibility

WHAT IS ACCESSIBILITY?

Page 4: Debugging Accessibility
Page 5: Debugging Accessibility

the quality of being easily reached, entered or used by

people who have a disability?

Page 6: Debugging Accessibility

“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

Page 7: Debugging Accessibility

“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

Page 8: Debugging Accessibility

PEOPLE HAVE IMPAIRMENTS,

NOT DISABILITIES.

Page 9: Debugging Accessibility

DISABILITY ONLY EXISTS IF THERE IS NO WAY FOR A PERSON TO BE

INCLUDED.

Page 10: Debugging Accessibility

ACCESSIBILITY IS ABOUT ENABLING PEOPLE.

Page 11: Debugging Accessibility

Page 12: Debugging Accessibility

😀

Page 13: Debugging Accessibility

Page 14: Debugging Accessibility

😀

Page 15: Debugging Accessibility

Page 16: Debugging Accessibility

😀?

Page 17: Debugging Accessibility

IF YOUR APP ISN’T ACCESSIBLE, YOU ARE CREATING BARRIERS FOR USERS, YOU’RE MAKING THEIR IMPAIRMENT A DISABILITY.

Page 18: Debugging Accessibility

ACCESSIBILITY IS ABOUT ENABLING PEOPLE BY REMOVING BARRIERS.

Page 19: Debugging Accessibility

WHO USES ACCESSIBILITY?

Page 20: Debugging Accessibility

https://www.microsoft.com/en-us/design/inclusive

Page 21: Debugging Accessibility

Users with Visual Impairments

VoiceOver Users

What we assume

(Blind users)

Page 22: Debugging Accessibility

Users with Visual Impairments

VoiceOver Users

For illustration purposes only, not necessarily accurate of the number of users.

What’s more likely

Page 23: Debugging Accessibility

Users with Visual Impairments

VoiceOver Users

Large Text Users

For illustration purposes only, not necessarily accurate of the number of users.

Page 24: Debugging Accessibility

Users with Visual Impairments

VoiceOver Users

Large Text Users

Increase Contrast Users

For illustration purposes only, not necessarily accurate of the number of users.

Page 25: Debugging Accessibility

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.

Page 26: Debugging Accessibility

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.

Page 27: Debugging Accessibility

ACCESSIBILITY IS NOT JUST VOICEOVER.

Page 28: Debugging Accessibility
Page 29: Debugging Accessibility

DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.

Page 30: Debugging Accessibility
Page 31: Debugging Accessibility

WHY DO WE TAKE PHOTOS?

Page 32: Debugging Accessibility

DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.

Page 33: Debugging Accessibility

DEBUGGING ACCESSIBILITY1) KNOWING SOMETHING IS BROKEN 2) FINDING OUT HOW IT’S BROKEN 3) FIX AND RE-TEST

Page 34: Debugging Accessibility

1) KNOWING SOMETHING IS BROKEN

Page 35: Debugging Accessibility

WHAT NEEDS TO BE TESTED?

Page 36: Debugging Accessibility

THERE ARE SO MANY ACCESSIBILITY SETTINGS! 😱

Page 37: Debugging Accessibility

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

Page 38: Debugging Accessibility

VoiceOver Dynamic Type Bold Text Reduce Transparency Reduce Motion Switch Control

Greyscale Invert Colors Subtitle & Captioning Audio Descriptions

iOS

Page 39: Debugging Accessibility

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

Page 40: Debugging Accessibility

VoiceOver Increase Contrast Reduce Transparency Reduce Motion Switch Control

Differentiate without colour Dictation/Siri Mono Audio Subtitles and Captioning Audio Descriptions

macOS

Page 41: Debugging Accessibility

VoiceOver Zoom Greyscale Dynamic Type Bold Text Reduce Transparency Reduce Motion On/Off Labels

Dictation/Siri Mono Audio Haptic Feedback

watchOS

Page 42: Debugging Accessibility

VoiceOver Dynamic Type Bold Text Reduce Transparency Reduce Motion

Greyscale Mono Audio Haptic Feedback

watchOS

Page 43: Debugging Accessibility

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

Page 44: Debugging Accessibility

VoiceOver Bold Text Reduce Transparency Reduce Motion Switch Control

Greyscale* Subtitle & Captioning Audio Descriptions

tvOS

Page 45: Debugging Accessibility

BROKEN VS. WORKING

Page 46: Debugging Accessibility

VOICEOVER

Page 47: Debugging Accessibility

developer.apple.com/ios/human-interface-guidelines

Page 48: Debugging Accessibility

From the Accessibility Programming Guide for iOS on developer.apple.com

Page 49: Debugging Accessibility

-FOCUSABLE -LABELED -TRAITS -ACTIONABLE -STATE -CONTEXT

Page 50: Debugging Accessibility

LARGE TEXT

Page 51: Debugging Accessibility
Page 52: Debugging Accessibility

BOLD TEXT

Page 53: Debugging Accessibility
Page 54: Debugging Accessibility
Page 55: Debugging Accessibility

REDUCE TRANSPARENCY

Page 56: Debugging Accessibility

developer.apple.com/ios/human-interface-guidelines

Page 57: Debugging Accessibility

REDUCE MOTION

Page 58: Debugging Accessibility
Page 59: Debugging Accessibility

GREYSCALE

Page 60: Debugging Accessibility
Page 61: Debugging Accessibility
Page 62: Debugging Accessibility

SWITCH CONTROL

Page 63: Debugging Accessibility
Page 64: Debugging Accessibility
Page 65: Debugging Accessibility

-FOCUSABLE -ACTIONABLE -HIERARCHY -GROUPED

Page 66: Debugging Accessibility

2) FINDING OUT HOW IT’S BROKEN

Page 67: Debugging Accessibility

WHO CAN TEST?

Page 68: Debugging Accessibility

DEVELOPERS DESIGNERS PRODUCT PEOPLE QA/TESTERS …EVERYONE!

Page 69: Debugging Accessibility

MANUAL TESTING (ON A DEVICE)

Page 70: Debugging Accessibility

NOTHING IS BETTER THAN MANUAL TESTING.

Page 71: Debugging Accessibility

CAN SPEED UP MANUAL TESTING?

Page 72: Debugging Accessibility

KNOW YOUR GESTURES!

Page 73: Debugging Accessibility

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.

Page 74: Debugging Accessibility

2-FINGER SWIPE UP

READ CONTENTS OF SCREEN IN ORDER

FROM THE TOP

Page 75: Debugging Accessibility

COMBINE SETTINGS.

Page 76: Debugging Accessibility

SUPPORT.APPLE.COM/ACCESSIBILITY

Page 77: Debugging Accessibility

ACCESSIBILITY INSPECTOR

Page 78: Debugging Accessibility

NEW IN XCODE 8

Page 79: Debugging Accessibility
Page 80: Debugging Accessibility
Page 81: Debugging Accessibility

-ACCESSIBILITY ELEMENT INSPECTION -AUDIT -SETTINGS

ACCESSIBILITY INSPECTOR

Page 82: Debugging Accessibility

HARDWARE OR SIMULATOR

Page 83: Debugging Accessibility

CONTROL SETTINGS ON HARDWARE

Page 84: Debugging Accessibility

“SPY” ON OTHER APPS

Page 85: Debugging Accessibility

DEMO

🤞

Page 86: Debugging Accessibility

AUTOMATED TESTING

Page 87: Debugging Accessibility

UI TESTING USES ACCESSIBILITY INFORMATION

Page 88: Debugging Accessibility

APP NOT UI-TESTABLE BECAUSE: -NOT ACCESSIBLE -POOR ACCESSIBILITY DATA

Page 89: Debugging Accessibility

UI-TESTABLE = ACCESSIBLE?

Page 90: Debugging Accessibility

DOESN’T GUARANTEE ACCESSIBILITY.

Page 91: Debugging Accessibility

VOICEOVER & SWITCH CONTROL

Page 92: Debugging Accessibility

DOESN’T HELP WITH ALL THE OTHER THINGS…

Page 93: Debugging Accessibility

3) FIX IT & RE-TEST

Page 94: Debugging Accessibility

GET REAL USERS INVOLVED!

Page 95: Debugging Accessibility

GET BETA TESTERS WHO USE A VARIETY OF ASSISTIVE TECHNOLOGY.

Page 96: Debugging Accessibility

APPLEVIS.COM @APPLEVIS

Page 97: Debugging Accessibility
Page 98: Debugging Accessibility

DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.

Page 99: Debugging Accessibility

THANK YOU!@MOSTGOOD

Page 100: Debugging Accessibility

QUESTIONS?@MOSTGOOD

Page 101: Debugging Accessibility

DEBUGGING SUGGESTIONS?

@MOSTGOOD