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

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

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

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

Accessibility 5

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

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

Connectivity 8

Global Accessibility 9

Global Accessibility Framework 10

Design for Usability 11

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

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

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

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

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

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

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

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

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

Writing - 簡潔な説明にする 21

Design for Connectivity 22

Tips 23 ネットワーク環境毎のオプ ションをつける コンテンツを徐々に描画す る よく使われるコンテンツを先 行読み込みする オフラインであることをUIに 表示する

Save data traffic ChromeのData Saver 24

Test 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

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

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

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

Memory Monitor 30

Develop for Usability 31

Labeling UI Elements - 静的 “share” 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

Making Touch Targets Large 34

Develop for Connectivity 35

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

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

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

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

Speeding up your Android Gradle builds 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

参考 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