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