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

Android Accessibility (Google I/O '17)

Android Accessibility (Google I/O '17)

Shibuya.apk #16の発表資料です。

shibuya.apk #16 - connpass
https://shibuya-apk.connpass.com/event/59671/

Rui Kowase

June 22, 2017
Tweet

More Decks by Rui Kowase

Other Decks in Technology

Transcript

  1. Android Accessibility
    Rui Kowase
    @rkowase
    (Google I/O ‘17)

    View full-size slide

  2. Profile
    ● 名前: 小和瀬 塁(こわせ るい)
    ● アカウント: @rkowase
    ● Android歴: 1年ちょっと
    2

    View full-size slide

  3. Accessibility関連セッション(Google I/O ‘17)
    ● What's New in Android Accessibility
    ● Pragmatic Accessibility: A How-To Guide for Teams
    ● Designing for the Next Billion Users: Accessibility UX
    Insights from the Developing World
    ● Android Go
    ● Best Practices to Slim Down Your App Size
    3

    View full-size slide

  4. Agenda
    ● Accessibility
    ● Design
    ○ for Usability
    ○ for Connectivity
    4
    ● Test
    ● Develop
    ○ for Usability
    ○ for Connectivity

    View full-size slide

  5. Accessibility
    5

    View full-size slide

  6. Accessibilityとは
    「障害のあるユーザーを含む
     すべてのユーザーのアプリの
     使いやすさを向上させること。」
    (引用)
    Accessibility | Android Developers
    https://developer.android.com/guide/topics/ui/accessibility/index.html
    6

    View full-size slide

  7. なぜAccessibilityが重要なのか
    5人に1人は生活に何かしらの
    ハンディキャップがある
    次の10億人のユーザーは必ずしもリ
    テラシーが高くない
    ローエンド端末や低速ネットワークに
    適したアプリを作ることで、
    一般的なユーザーにも使いやすい
    UI/UXにできる
    (引用)https://www.youtube.com/watch?v=38fbB8wCPzg 7

    View full-size slide

  8. Connectivity
    8

    View full-size slide

  9. Global Accessibility
    9

    View full-size slide

  10. Global Accessibility Framework
    10

    View full-size slide

  11. Design for Usability
    11

    View full-size slide

  12. Color and Contrast - 最低限のコントラストを保つ
    12

    View full-size slide

  13. Color and Contrast - 最低限のコントラストを保つ
    大きいテキストは3:1以上
    小さいテキストは4.5:1以上
    13

    View full-size slide

  14. Color and Contrast - 最低限のコントラストを保つ
    14

    View full-size slide

  15. Color and Contrast - 色だけで情報を表現しない
    15

    View full-size slide

  16. Style
    タップ領域:48x48dp以上
    アイコン:24x24dp以上
    16

    View full-size slide

  17. Style
    関連する要素はグルーピン
    グする
    17

    View full-size slide

  18. Implementation
    標準のUIパーツを使う
    18

    View full-size slide

  19. Implementation
    XMLのcontentDescription
    属性を設定する
    1. “search”
    2. “voice search”
    3. “option”
    19

    View full-size slide

  20. Writing - 状態を説明に含めない
    20

    View full-size slide

  21. Writing - 簡潔な説明にする
    21

    View full-size slide

  22. Design for Connectivity
    22

    View full-size slide

  23. Tips
    23
    ネットワーク環境毎のオプ
    ションをつける
    コンテンツを徐々に描画す

    よく使われるコンテンツを先
    行読み込みする
    オフラインであることをUIに
    表示する

    View full-size slide

  24. Save data
    traffic
    ChromeのData Saver
    24

    View full-size slide

  25. Testing
    ● Manual Testing
    ○ TalkBack
    ○ Switch Access
    ○ BrailleBack
    ○ Voice Access (beta)
    ● Automated testing
    ○ Espresso
    ○ Robolectric
    ● Testing with analysis
    tools
    ○ Accessibility Scanner
    ○ Node tree debugging
    ○ UI Automator Viewer
    ○ Lint
    ● User testing
    26

    View full-size slide

  26. Testing
    ● Manual Testing
    ○ TalkBack
    ○ Switch Access
    ○ BrailleBack
    ○ Voice Access (beta)
    ● Automated testing
    ○ Espresso
    ○ Robolectric
    ● Testing with analysis
    tools
    ○ Accessibility Scanner
    ○ Node tree debugging
    ○ UI Automator Viewer
    ○ Lint
    ● User testing
    27

    View full-size slide

  27. Accessibility
    Scanner
    起動中のアプリのスクリー
    ンショットを取得し、
    Accessibilityのテストやレ
    ポートをしてくれるGoogle
    製アプリ
    28

    View full-size slide

  28. Accessibility
    Scanner
    Accessibilityに問題のある
    UIを強調表示
    問題のあるUIを具体的にど
    のように修正すればいいか
    を提案
    29

    View full-size slide

  29. Memory Monitor
    30

    View full-size slide

  30. Develop for Usability
    31

    View full-size slide

  31. Labeling UI Elements - 静的
    ...
    android:contentDescription="@string/share"
    android:src="@drawable/ic_share" />
    “share”
    32

    View full-size slide

  32. Labeling UI Elements - 動的
    if (mediaCurrentlyPlaying) {
    playPauseImageView.setImageResource(R.drawable.ic_pause);
    // In res/values/strings.xml, "pause" contains a value of "Pause".
    playPauseImageView.setContentDescription(getString(R.string.pause));
    } else {
    playPauseImageView.setImageResource(R.drawable.ic_play);
    // In res/values/strings.xml, "play" contains a value of "Play".
    playPauseImageView.setContentDescription(getString(R.string.play));
    }
    “pause”
    “play”
    33

    View full-size slide

  33. Making Touch Targets Large
    ...
    android:minWidth="48dp"
    android:minHeight="48dp" />
    34

    View full-size slide

  34. Develop for Connectivity
    35

    View full-size slide

  35. Use Proguard
    android {
    buildTypes {
    release {
    minifyEnabled true
    }
    }
    }
    36

    View full-size slide

  36. Shrink Resources
    android {
    buildTypes {
    release {
    shrinkResources true
    }
    }
    }
    37

    View full-size slide

  37. Build Multiple APKs
    android {
    splits {
    density {
    enable true
    }
    }
    }
    38

    View full-size slide

  38. Use Vector Drawables
    android {
    defaultConfig {
    vectorDrawables.useSupportLibrary true
    }
    }
    39

    View full-size slide

  39. Speeding up your Android Gradle builds
    40

    View full-size slide

  40. まとめ
    ● Design
    ○ 最低限のコントラストを保つ
    ○ 色だけで情報を表現しない
    ○ 最低限のタップ領域を確保する
    ○ 関連する要素はグルーピングする
    ○ 標準のUIパーツを使う
    ○ XMLのcontentDescription属性を設定する
    ○ 状態を説明に含めない
    ○ 簡潔な説明にする
    ○ ネットワーク環境毎のオプションをつける
    ○ コンテンツを徐々に描画する
    ○ よく使われるコンテンツを先行読み込みする
    ○ オフラインであることを UIに表示する
    ● Test
    ○ Accessibility Scanner
    ○ Android Studio Memory Monitor
    41
    ● Develop
    ○ Making Touch Targets Large
    ○ Labeling UI Elements
    ○ Use Proguard
    ○ Shrink Resources
    ○ Build Multiple APKs
    ○ Use Vector Drawables
    ○ Speeding up your Android Gradle builds

    View full-size slide

  41. 参考
    Accessibility | Android Developers
    https://developer.android.com/guide/topics/ui/accessi
    bility/index.html
    【Android】Accessibility関連セッションメモ (Google I/O '17)
    - Qiita
    http://qiita.com/rkowase/items/af6e9cfa721795aaa1b0
    Android Goメモ (Google I/O '17) - Qiita
    http://qiita.com/rkowase/items/6d5f6a157ec7daa00f4
    a
    【Android】Google I/O 2017のSpeeding up your Android
    Gradle buildsで発表された10のTips - Qiita
    http://qiita.com/rkowase/items/808064f16272e131be6
    3
    42
    What's New in Android Accessibility (Google I/O '17) -
    YouTube
    https://www.youtube.com/watch?v=h5rRNXzy1xo
    Pragmatic Accessibility: A How-To Guide for Teams
    (Google I/O '17) - YouTube
    https://www.youtube.com/watch?v=A5XzoDT37iM
    Accessibility UX Insights: Designing for the Next Billion
    Users (Google I/O '17) - YouTube
    https://www.youtube.com/watch?v=38fbB8wCPzg
    Android Go (Google I/O '17) - YouTube
    https://www.youtube.com/watch?v=CHKfKChZSE0

    View full-size slide