Build Apps For The Ones You Love

Build Apps For The Ones You Love

Britt loves her Nana so much. She’s funny, she’s cool and she always has strawberries for her.
When she told Britt she's starting to have difficulties to see, Britt went through some of her favorites apps which are actually hard to use.

Not every developer knows that with just some simple modifications, their app can be accessible for so many other users. You have the power to improve people’s lives, independence and inclusion, with just a few lines of code. And these people can actually be the ones you most care about.

In this session, Britt will share some tips on how to do that.

(Presented at Droidcon London 2018)

3142db3adb711e247e371153b5777e04?s=128

Britt Barak

October 25, 2018
Tweet

Transcript

  1. Apps for everyone It s in your hands ! ‘

    Britt Barak
  2. Apps for everyone It s in your hands ! the

    ones you ‘ Britt Barak
  3. Britt Barak Dev Experience @ Nexmo Google Developer Expert @brittBarak

    Britt Barak
  4. @BrittBarak

  5. @BrittBarak

  6. @BrittBarak

  7. @BrittBarak

  8. @BrittBarak

  9. @BrittBarak

  10. @BrittBarak

  11. Detector detector .execute(image) Result: @BrittBarak “Ben & Jerry’s pistachio ice

    cream pint”
  12. beta @BrittBarak

  13. & First Steps With ML-Kit @BrittBarak Who is afraid of

    Machine Learning?
  14. Result @BrittBarak

  15. Result @BrittBarak

  16. Basic ideas @BrittBarak

  17. android:textSize="20sp" Basic ideas scalable pixels (SP) @BrittBarak

  18. @BrittBarak

  19. @BrittBarak

  20. @BrittBarak

  21. @BrittBarak

  22. @BrittBarak

  23. @BrittBarak

  24. @BrittBarak

  25. @BrittBarak

  26. @BrittBarak

  27. @BrittBarak

  28. @BrittBarak

  29. @BrittBarak

  30. Remember runtime! @BrittBarak

  31. Basic ideas Color Contrast Diff in luminance 1:1 to 21:1

    @BrittBarak
  32. @BrittBarak

  33. @BrittBarak

  34. World Wide Web Consortium (W3C) •min 3:1 for large text

    •min 4.5:1 for small text •(Large text : 18p or 14p bold and up) www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html @BrittBarak
  35. https://contrast-ratio.com/ @BrittBarak

  36. https://contrast-ratio.com/ @BrittBarak

  37. https://contrast-ratio.com/ @BrittBarak

  38. Basic ideas Touch Target Min 48dp @BrittBarak

  39. @BrittBarak

  40. <ImageButton android:layout_height="wrap_content" android:minHeight=“48dp” android:minWidth="48dp" …/> @BrittBarak

  41. And still… @BrittBarak

  42. @BrittBarak

  43. @BrittBarak

  44. @BrittBarak

  45. @BrittBarak

  46. @BrittBarak

  47. @BrittBarak

  48. Tools TalkBack @BrittBarak

  49. @BrittBarak

  50. @BrittBarak

  51. TalkBack •Linear exploration •Explore by touch @BrittBarak

  52. @BrittBarak

  53. Tools Select to Speak @BrittBarak

  54. @BrittBarak

  55. TalkBack State + Content Description + Type + Actions @BrittBarak

  56. Description •(TextView: text) •android:contentDescription=“… " •View.contentDescription = “… " @BrittBarak

  57. Example @BrittBarak

  58. Step1 •“ image 4 drop down list. Double Tap to

    change” @BrittBarak
  59. Step2 •“ image 4 …” •“ Unlabelled button. Double tap

    to activate” @BrittBarak
  60. <ImageButton … android:contentDescription="open camera"/> @BrittBarak

  61. The purpose, not the looks @BrittBarak

  62. Step2 •“ image 4 …” •“ Unlabelled button. Double tap

    to activate” @BrittBarak
  63. Step2 •“ image 4 …” •“ Unlabelled open camera button.

    Double tap to activate” @BrittBarak
  64. Step3 •“ image 4 …” •“ open camera …” @BrittBarak

  65. Step3 •“ image selected: image 4 …” •“ open camera

    …” @BrittBarak
  66. Step3 •“ image selected: image 4 …” •“ open camera

    …” @BrittBarak
  67. override fun onItemSelected(parent: AdapterView<*>, v: View, position: Int, id: Long)

    { //… spinner.contentDescription = "Image selected : image " + labels[position] } @BrittBarak
  68. Step3 •“ image selected: image 4 …” •“ open camera

    …” @BrittBarak
  69. Step4 •“ select an image” •“ selected image : image

    4 …” •“ open camera …” @BrittBarak
  70. <LinearLayout ... android:contentDescription="choose an image "> <Spinner . . .

    /> <ImageButton . . . /> @BrittBarak
  71. Step4 •“ select an image” •“ selected image : image

    4 …” •“ open camera …” @BrittBarak
  72. Step4 •“ select an image” •“ selected image : image

    4 …” •“ open camera …” @BrittBarak
  73. Step4 •“ select an image” •“ selected image : image

    4 …” •“ open camera …” @BrittBarak
  74. Step5 •“ select an image” •“ selected image : image

    4 …” •“ open camera …” @BrittBarak
  75. Skip a View android:importantForAccessibility= @BrittBarak

  76. Skip a View android:importantForAccessibility= “ auto | yes | no

    | noHideDescendants “ @BrittBarak
  77. Re-Order (API 22+) android:accessibilityTraversalAfter= “…” android:accessibilityTraversalBefore= “…” @BrittBarak

  78. Step5 •“ select an image” •“ selected image : image

    4 …” •“ open camera …” @BrittBarak
  79. Announce View. announceForAccessibility(“…”) @BrittBarak

  80. Live Region (api 19) android:accessibilityLiveRegion= “ none | polite |

    assertive “ @BrittBarak
  81. Step5 •“select an image” •“selected image : image 4 …”

    •“open camera …” @BrittBarak
  82. Step5 •“select an image” •“selected image : image 4 …”

    •“open camera …” @BrittBarak
  83. Step5 •“select an image” •“selected image : image 4 …”

    •“open camera …” @BrittBarak
  84. Step5 •“select an image” •“selected image : image 4 …”

    •“open camera …” @BrittBarak
  85. IRL @BrittBarak

  86. @BrittBarak

  87. Tools Accessibility Scanner To get started @BrittBarak

  88. @BrittBarak

  89. @BrittBarak

  90. @BrittBarak

  91. @BrittBarak

  92. @BrittBarak

  93. @BrittBarak

  94. Accessibility Scanner •Low contrast •Content labelling •Touch target size •Implementation

    [ View hierarchies issues] @BrittBarak
  95. @BrittBarak

  96. @BrittBarak

  97. “… double tap to activate , double tap and hold

    to long press” @BrittBarak
  98. “… double tap to activate , double tap and hold

    to long press” @BrittBarak
  99. “… double tap to activate , double tap and hold

    to long press” @BrittBarak
  100. “… double tap to open chat , double tap and

    hold to have more options” @BrittBarak
  101. ViewCompat.setAccessibilityDelegate( rowView, object: AccessibilityDelegateCompat() { }) @BrittBarak

  102. ViewCompat.setAccessibilityDelegate( rowView, object: AccessibilityDelegateCompat() { override fun onInitializeAccessibilityNodeInfo( host: View,

    info: AccessibilityNodeInfoCompat) { } }) @BrittBarak
  103. ViewCompat.setAccessibilityDelegate( rowView, object: AccessibilityDelegateCompat() { override fun onInitializeAccessibilityNodeInfo( host: View,

    info: AccessibilityNodeInfoCompat) { super.onInitializeAccessibilityNodeInfo(host, info) } }) @BrittBarak
  104. @BrittBarak

  105. val clickAction @BrittBarak

  106. val clickAction = AccessibilityActionCompat( @BrittBarak

  107. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, ) @BrittBarak

  108. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") @BrittBarak

  109. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") info.addAction(clickAction) @BrittBarak

  110. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") info.addAction(clickAction) val longClickAction

    = @BrittBarak
  111. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") info.addAction(clickAction) val longClickAction

    = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_LONG_CLICK, "more options") @BrittBarak
  112. val clickAction = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_CLICK, "open chat") info.addAction(clickAction) val longClickAction

    = AccessibilityActionCompat( AccessibilityNodeInfoCompat.ACTION_LONG_CLICK, "more options") info.addAction(longClickAction) @BrittBarak
  113. @BrittBarak

  114. @BrittBarak

  115. •“chats display selected, 6 new. Double tap to activate” @BrittBarak

  116. •“chats display selected, 6 new. Double tap to activate” @BrittBarak

  117. •“chats display selected, 6 new.” •“attachments display. Double tap to

    activate” @BrittBarak
  118. •“chats display selected, 6 new.” •“attachments display. Double tap to

    activate select” @BrittBarak
  119. •“chats display selected, 6 new.” •“attachments display. Double tap to

    select” •“voice mails display, 7 new. Double tap to activate” @BrittBarak
  120. •“chats display selected, 6 new.” •“attachments display. Double tap to

    select” •“voice mails display, 7 new. Double tap to select” @BrittBarak
  121. “chats display selected, 6 new. Double tap and hold to

    change” @BrittBarak
  122. “all messages display. Double tap and hold to change” @BrittBarak

  123. Is a11y enabled? val am = getSystemService(Context.ACCESSIBILITY_SERVICE) as AccessibilityManager val

    isAccessibilityEnabled = am.isEnabled val isExploreByTouchEnabled = am.isTouchExplorationEnabled @BrittBarak
  124. Testing •Automatic: Espresso, roblectric •Manual user testing developer.android.com/training/accessibility/testing

  125. Tools TalkBack @BrittBarak Select to Speak Braille Back Switch Access

    Voice Access
  126. Check out MLKit @BrittBarak Actions on Google Speech to Text

  127. Apps for everyone It s in your hands ! the

    ones you ‘ Britt Barak
  128. Thank you! Keep in touch!