Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Debugging Accessibility @ Craft Conf

168 views

Published on

In this talk, you’ll learn how to use different tools to effectively debug common accessibility problems. We’ll look at how to use the Accessibility Inspector, how to manually test for accessibility, and how to use automated testing to catch accessibility problems. This talk will cover examples on iOS, watchOS, tvOS and macOS.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Debugging Accessibility @ Craft Conf

  1. 1. DEBUGGING ACCESSIBILITY SALLY SHEPARD @MOSTGOOD
  2. 2. -QUICK INTRO TO ACCESSIBILITY -MANUAL DEBUGGING -ACCESSIBILITY INSPECTOR -UI TESTING -ACCESSIBILITY & WORKFLOW
  3. 3. QUICK INTRO TO ACCESSIBILITY
  4. 4. THE RELATIONSHIP BETWEEN ACCESSIBILITY & DISABILITY
  5. 5. “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
  6. 6. PEOPLE HAVE IMPAIRMENTS, IMPAIRMENTS AREN’T THE SAME AS A DISABILITY.
  7. 7. DISABILITY ONLY EXISTS IF THERE IS NO WAY FOR A PERSON TO BE INCLUDED.
  8. 8.
  9. 9. 😀
  10. 10. ACCESSIBILITY IS ABOUT ENABLING PEOPLE.
  11. 11. ACCESSIBILITY IS ABOUT ENABLING PEOPLE BY REMOVING BARRIERS.
  12. 12. IF YOUR APP ISN’T ACCESSIBLE, YOU ARE CREATING BARRIERS, YOU’RE MAKING A USERS IMPAIRMENT A DISABILITY.
  13. 13. YOU CAN REMOVE BARRIERS BY SUPPORTING ACCESSIBILITY FEATURES.
  14. 14. ACCESSIBILITY IS NOT JUST VOICEOVER.
  15. 15. https://www.microsoft.com/en-us/design/inclusive
  16. 16. THERE ARE SO MANY ACCESSIBILITY FEATURES!
  17. 17. 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
  18. 18. MOST ACCESSIBILITY FEATURES ARE HANDLED BY THE SYSTEM (NO ADDITIONAL WORK FOR YOU) 🎉 🎉 🎉 🎉 🎉
  19. 19. 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
  20. 20. 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
  21. 21. QUITE A FEW ACCESSIBILITY FEATURES ONLY APPLY TO SOME APPS.
  22. 22. 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
  23. 23. 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
  24. 24. A LOT CAN BE HANDLED IN THE DESIGN PHASE.
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. RELATIONSHIP BETWEEN VOICEOVER AND SWITCH CONTROL
  29. 29. -ACCESSIBILITY API -ACCESSIBILITY ELEMENTS
  30. 30. 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
  31. 31. 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
  32. 32. ~300 MILLION VISUALLY IMPAIRED DYNAMIC TYPE IS SUPER IMPORTANT TO SUPPORT IN YOUR APPS!
  33. 33. WHAT IF WE CAN’T RELY ON OUR DESIGNS TO SUPPORT ACCESSIBILITY?
  34. 34. 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
  35. 35. DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.
  36. 36. WHY DO WE TAKE PHOTOS?
  37. 37. DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.
  38. 38. MANUAL TESTING & DEBUGGING
  39. 39. MANUAL TESTING ON HARDWARE
  40. 40. *DEMO*
  41. 41. -FOCUSABLE -LABELED -TRAITS -ACTIONABLE -STATE -CONTEXT VOICEOVER
  42. 42. MANUAL TESTING IN XCODE -LOG OUT ACCESSIBILITY INFO -DEBUG VIEW HIERARCHY
  43. 43. MAKING THE MOST OF MANUAL TESTING
  44. 44. RATHER THAN TESTING EVERY ELEMENT ON THE SCREEN, TEST A FEATURE FROM START TO FINISH.
  45. 45. SIMPLIFY ELEMENTS: GROUP ITEMS & MAKE LARGER TAP TARGETS.
  46. 46. NOTHING IS BETTER THAN MANUAL TESTING.
  47. 47. MANUAL TESTING GOOD ✅ COMPREHENSIVE BAD 🕰 SLOW
  48. 48. SPEEDING UP MANUAL TESTING
  49. 49. KNOW YOUR VOICEOVER GESTURES!
  50. 50. 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
  51. 51. 2-FINGER SWIPE UP READ CONTENTS OF SCREEN IN ORDER FROM THE TOP
  52. 52. COMBINE DISPLAY ACCOMMODATION SETTINGS. Greyscale Dynamic Type Bold Text Reduce Transparency Reduce Motion Differentiate without colour (macOS) Increase Contrast (macOS)
  53. 53. ACCESSIBILITY SHORTCUT! (AT THE BOTTOM OF THE LIST IN ACCESSIBILITY) SETTINGS -> GENERAL -> ACCESSIBILITY -> ACCESSIBILITY SHORTCUT
  54. 54. SUPPORT.APPLE.COM/ACCESSIBILITY
  55. 55. TESTING & DEBUGGING WITH THE ACCESSIBILITY INSPECTOR
  56. 56. ACCESSIBILITY INSPECTOR *NEW IN XCODE 8*
  57. 57. -ACCESSIBILITY ELEMENT INSPECTION -AUDIT -SETTINGS ACCESSIBILITY INSPECTOR
  58. 58. WORKS WITH HARDWARE OR THE SIMULATOR
  59. 59. CONTROL SETTINGS ON HARDWARE
  60. 60. “SPY” ON OTHER APPS
  61. 61. *DEMO*
  62. 62. TESTING & DEBUGGING WITH UI TESTING
  63. 63. UI TESTING IN XCODE RELIES ON ACCESSIBILITY ELEMENTS.
  64. 64. IF YOUR APP IS NOT UI TESTABLE, IT’S BECAUSE IT HAS POOR ACCESSIBILITY DATA.
  65. 65. UI TESTABLE == ACCESSIBLE?
  66. 66. UI TESTING DOESN’T GUARANTEE ACCESSIBILITY.
  67. 67. UI TESTING CAN BE HELPFUL FOR SUPPORTING VOICEOVER (AND SWITCH CONTROL TO AN EXTENT)
  68. 68. BUT ACCESSIBILITY IS NOT JUST VOICEOVER.
  69. 69. *DEMO*
  70. 70. MAKE ACCESSIBILITY PART OF YOUR WORKFLOW
  71. 71. A LOT OF ACCESSIBILITY WORK CAN BE DONE IN THE DESIGN PHASE.
  72. 72. ACCESSIBILITY IS NOT A FEATURE, EVERY FEATURE SHOULD BE ACCESSIBLE.
  73. 73. IF IT’S NOT ACCESSIBLE, IT’S NOT DONE.
  74. 74. MAKE TESTING FOR ACCESSIBILITY PART OF YOUR TEST PLAN.
  75. 75. GET REAL USERS INVOLVED!
  76. 76. GET BETA TESTERS WHO USE A VARIETY OF ASSISTIVE TECHNOLOGIES.
  77. 77. APPLEVIS.COM @APPLEVIS
  78. 78. THINGS TO REMEMBER
  79. 79. KNOW YOUR VOICEOVER GESTURES!
  80. 80. DON’T LET THE SIZE OF WORK DISCOURAGE YOU FROM STARTING IT.
  81. 81. REDUCING COSTS •Move most Accessibility work to design phase •Focus on testing the right things •Work incrementally •Prioritise most important features
  82. 82. IF IT’S NOT ACCESSIBLE, IT’S NOT DONE.
  83. 83. DON’T WORRY ABOUT WHAT A USER CAN’T DO. FOCUS ON WHAT THE TECHNOLOGY CAN DO.
  84. 84. THANK YOU! @MOSTGOOD
  85. 85. QUESTIONS? @MOSTGOOD

×