Android Accessibility (Google I/O '17)

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

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

Transcript

1. Android Accessibility Rui Kowase @rkowase (Google I/O ‘17)
2. Profile • 名前: 小和瀬 塁（こわせ るい） • アカウント: @rkowase • Android歴: 1年ちょっと 2
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
4. Agenda • Accessibility • Design ◦ for Usability ◦ for Connectivity 4 • Test • Develop ◦ for Usability ◦ for Connectivity
5. Accessibility 5
6. Accessibilityとは 「障害のあるユーザーを含む 　すべてのユーザーのアプリの 　使いやすさを向上させること。」 （引用） Accessibility | Android Developers https://developer.android.com/guide/topics/ui/accessibility/index.html 6
7. なぜAccessibilityが重要なのか 5人に1人は生活に何かしらの ハンディキャップがある 次の10億人のユーザーは必ずしもリ テラシーが高くない ローエンド端末や低速ネットワークに 適したアプリを作ることで、 一般的なユーザーにも使いやすい UI/UXにできる （引用）https://www.youtube.com/watch?v=38fbB8wCPzg 7
8. Connectivity 8
9. Global Accessibility 9
10. Global Accessibility Framework 10
11. Design for Usability 11
12. Color and Contrast - 最低限のコントラストを保つ 12
13. Color and Contrast - 最低限のコントラストを保つ 大きいテキストは3:1以上 小さいテキストは4.5:1以上 13
14. Color and Contrast - 最低限のコントラストを保つ 14
15. Color and Contrast - 色だけで情報を表現しない 15
16. Style タップ領域:48x48dp以上 アイコン:24x24dp以上 16
17. Style 関連する要素はグルーピン グする 17
18. Implementation 標準のUIパーツを使う 18
19. Implementation XMLのcontentDescription 属性を設定する 1. “search” 2. “voice search” 3. “option” 19
20. Writing - 状態を説明に含めない 20
21. Writing - 簡潔な説明にする 21
22. Design for Connectivity 22
23. Tips 23 ネットワーク環境毎のオプ ションをつける コンテンツを徐々に描画す る よく使われるコンテンツを先 行読み込みする オフラインであることをUIに 表示する
24. Save data traffic ChromeのData Saver 24
25. Test 25
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 26
27. 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
28. Accessibility Scanner 起動中のアプリのスクリー ンショットを取得し、 Accessibilityのテストやレ ポートをしてくれるGoogle 製アプリ 28
29. Accessibility Scanner Accessibilityに問題のある UIを強調表示 問題のあるUIを具体的にど のように修正すればいいか を提案 29
30. Memory Monitor 30
31. Develop for Usability 31
32. Labeling UI Elements - 静的 <ImageButton ... android:contentDescription="@string/share" android:src="@drawable/ic_share" /> “share” 32
33. 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
34. Making Touch Targets Large <ImageButton ... android:minWidth="48dp" android:minHeight="48dp" /> 34
35. Develop for Connectivity 35
36. Use Proguard android { buildTypes { release { minifyEnabled true } } } 36
37. Shrink Resources android { buildTypes { release { shrinkResources true } } } 37
38. Build Multiple APKs android { splits { density { enable true } } } 38
39. Use Vector Drawables android { defaultConfig { vectorDrawables.useSupportLibrary true } } 39
40. Speeding up your Android Gradle builds 40
41. まとめ • 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
42. 参考 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