Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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)

Britt Barak

October 25, 2018
Tweet

More Decks by Britt Barak

Other Decks in Programming

Transcript

  1. Apps for everyone
    It s in your hands !

    Britt Barak

    View full-size slide

  2. Apps for everyone
    It s in your hands !
    the ones you

    Britt Barak

    View full-size slide

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

    View full-size slide

  4. Detector
    detector
    .execute(image)
    Result:
    @BrittBarak
    “Ben & Jerry’s
    pistachio
    ice cream pint”

    View full-size slide

  5. beta
    @BrittBarak

    View full-size slide

  6. & First Steps With ML-Kit
    @BrittBarak
    Who is afraid of
    Machine Learning?

    View full-size slide

  7. Result
    @BrittBarak

    View full-size slide

  8. Result
    @BrittBarak

    View full-size slide

  9. Basic ideas
    @BrittBarak

    View full-size slide

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

    View full-size slide

  11. Remember runtime!
    @BrittBarak

    View full-size slide

  12. Basic ideas
    Color Contrast
    Diff in luminance
    1:1 to 21:1
    @BrittBarak

    View full-size slide

  13. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Basic ideas
    Touch Target
    Min 48dp
    @BrittBarak

    View full-size slide

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

    View full-size slide

  19. And still…
    @BrittBarak

    View full-size slide

  20. Tools
    TalkBack
    @BrittBarak

    View full-size slide

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

    View full-size slide

  22. Tools
    Select to Speak
    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Example
    @BrittBarak

    View full-size slide

  26. Step1
    •“ image 4 drop down list.
    Double Tap to change”
    @BrittBarak

    View full-size slide

  27. Step2
    •“ image 4 …”
    •“ Unlabelled button. Double
    tap to activate”
    @BrittBarak

    View full-size slide


  28. android:contentDescription="open camera"/>
    @BrittBarak

    View full-size slide

  29. The purpose,
    not the looks
    @BrittBarak

    View full-size slide

  30. Step2
    •“ image 4 …”
    •“ Unlabelled button. Double
    tap to activate”
    @BrittBarak

    View full-size slide

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

    View full-size slide

  32. Step3
    •“ image 4 …”
    •“ open camera …”
    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. override fun onItemSelected(parent: AdapterView<*>,
    v: View, position: Int, id: Long) {
    //…
    spinner.contentDescription =
    "Image selected : image " + labels[position]
    }
    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. android:contentDescription="choose an image ">


    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Skip a View
    android:importantForAccessibility=
    @BrittBarak

    View full-size slide

  44. Skip a View
    android:importantForAccessibility=
    “ auto | yes | no | noHideDescendants “
    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Announce
    View. announceForAccessibility(“…”)
    @BrittBarak

    View full-size slide

  48. Live Region (api 19)
    android:accessibilityLiveRegion=
    “ none | polite | assertive “
    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. IRL
    @BrittBarak

    View full-size slide

  54. Tools
    Accessibility Scanner
    To get started
    @BrittBarak

    View full-size slide

  55. Accessibility Scanner
    •Low contrast
    •Content labelling
    •Touch target size
    •Implementation [ View hierarchies issues]
    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. “…
    double tap to open chat ,
    double tap and hold to have more options”
    @BrittBarak

    View full-size slide

  60. ViewCompat.setAccessibilityDelegate(
    rowView, object: AccessibilityDelegateCompat() {
    })
    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. val clickAction
    @BrittBarak

    View full-size slide

  64. val clickAction = AccessibilityActionCompat(
    @BrittBarak

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. “chats display selected, 6 new.
    Double tap and hold to change”
    @BrittBarak

    View full-size slide

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

    View full-size slide

  79. Is a11y enabled?
    val am =
    getSystemService(Context.ACCESSIBILITY_SERVICE)
    as AccessibilityManager
    val isAccessibilityEnabled = am.isEnabled
    val isExploreByTouchEnabled = am.isTouchExplorationEnabled
    @BrittBarak

    View full-size slide

  80. Testing
    •Automatic: Espresso, roblectric
    •Manual user testing
    developer.android.com/training/accessibility/testing

    View full-size slide

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

    View full-size slide

  82. Check out
    MLKit
    @BrittBarak
    Actions on Google
    Speech to Text

    View full-size slide

  83. Apps for everyone
    It s in your hands !
    the ones you

    Britt Barak

    View full-size slide

  84. Thank you!
    Keep in touch!

    View full-size slide