Android accessibility and automated check tools

Transcript

1. Androidアプリの アクセシビリティと ⾃動テストツール CA Y
2. ⾃⼰紹介 https://twitter.com/itometeam https://github.com/itome https://itome.team . min 塚本武志 CyberAgent CATS
3. Androidアプリのアクセシビリティ min
4. Androidアプリのアクセシビリティ ‧Talkbackを使った⾳声によるガイド 6min 過去のスライド https://speakerdeck.com/itome/android-accessibility-suite - Android Accessibility Suiteに含まれるTalkback機能を 使った⾳声ガイド - TextViewなどは⾃動でコンテンツが読み上げられる - ImageViewやCanvasに直接描画されたテキストは開発者が Talkback内容を指定する必要がある
5. ‧⽂字⾊と背景⾊のコントラスト - ⽂字⾊と背景⾊のコントラストが低いと、⽂字の視認性が悪くなる - ⾊覚障害のユーザーだけでなく、⽇光の下でのアプリの使い やすさにも影響する - マテリアルデザインガイドラインでは⼩さめのテキストでは 4.5:1以上、⼤きめのテキストでも3:1以上のコントラストが推 奨されている 参照リンク https://material.io/design/usability/accessibility.html#color-contrast Androidアプリのアクセシビリティ 6min
6. ‧⽂字⾊と背景⾊のコントラスト 参照リンク https://material.io/design/usability/accessibility.html#color-contrast Androidアプリのアクセシビリティ 6min - ⽂字⾊と背景⾊のコントラストが低いと、⽂字の視認性が悪くなる - ⾊覚障害のユーザーだけでなく、⽇光の下でのアプリの使い やすさにも影響する - マテリアルデザインガイドラインでは⼩さめのテキストでは 4.5:1以上、⼤きめのテキストでも3:1以上のコントラストが推 奨されている
7. ‧⽂字サイズ Androidアプリのアクセシビリティ 6min - ⽂字サイズが⼩さいと、視認性が悪くなる - タイトルや説明⽂など、テキストのタイプによって推奨の⽂字サイズはさまざま - Androidでは、どんなタイプのテキストであっても12sp以上の⽂字サイズを指定することが推奨されている
8. ‧⽂字サイズ - ⽂字サイズが⼩さいと、視認性が悪くなる - タイトルや説明⽂など、テキストのタイプによって推 奨の⽂字サイズはさまざま - Androidでは、どんなタイプのテキストであっても 12sp以上の⽂字サイズを指定することが推奨されて いる Androidアプリのアクセシビリティ 6min
9. ‧ボタンのサイズ - マテリアルデザインガイドラ インでは48dp x dp以上が 推奨されている - ⼩さめのアイコンなど、それ⾃体で推奨 サイズに届かないボタンは、paddingで タップ可能領域を広げる 参照リンク https://material.io/design/usability/accessibility.html#layout-typography Androidアプリのアクセシビリティ 6min
10. ‧その他 - ボタンのタッチ領域が重ならないようにする - TextViewに埋め込まれたURLにTalkbackでもアクセスで きるようにする - 冗⻑なcontentDescriptionを避ける（ボタンに対して 「〜のボタン」と読み上げさせるなど） - etc Androidアプリのアクセシビリティ 6min
11. min Androidのいろいろな アクセシビリティテスト
12. Androidのいろいろなアクセシビリティテスト min Android StudioのAccessibilityに関するLint ‧画像のcontentDescriptionがついているかなど、コード上で わかるアクセシビリティ対応を警告で教えてくれる
13. Androidのいろいろなアクセシビリティテスト min Google Play ConsoleのPre-launch report
14. Google Play ConsoleのPre-launch report ‧内部ではFirebase Test Labを使って実機テストが⾛っている ‧網羅的にテストできているわけではないものの、アプリの どんな部分に問題があるかに気づくきっかけになる ‧Google Play Consoleからアプリをリリースするときに  アクセシビリティに関する問題を検知してくれる Androidのいろいろなアクセシビリティテスト min
15. https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja ユーザー補助検証ツールを使ったテスト Androidのいろいろなアクセシビリティテスト min
16. 実機上で画⾯のスクリーンショット を取って⾃動的にテストしてくれる https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja ユーザー補助検証ツールを使ったテスト Androidのいろいろなアクセシビリティテスト min
17. https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja ユーザー補助検証ツールを使ったテスト ‧スクリーンショット上の要素であれば全てテスト対象にできるので、 ソースコードが内部にないアプリや、Webアプリなどの検証にも使える ‧必ず⼿動でスキャンする必要があるが、その分テスト対象 のページを柔軟に変更できる。 ‧実機テストのサポートをしてくれる。 Androidのいろいろなアクセシビリティテスト min
18. https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja ユーザー補助検証ツールを使ったテスト Demo Androidのいろいろなアクセシビリティテスト min
19. Android Test Framework for Androidを使ったUIテスト Androidのいろいろなアクセシビリティテスト min
20. Android Test Framework for Androidを使ったUIテスト ‧他のテストツールも基本的にこのライブラリに依存している ‧Espresso, Robolectricそれぞれに対応している ‧UIテストのコードに数⾏追加することで、UIテストと⼀緒に アクセシビリティテストも⾏ってくれる Androidのいろいろなアクセシビリティテスト min
21. テストできる項⽬ Androidのいろいろなアクセシビリティテスト min
22. @RunWith(AndroidJUnit4::class) @LargeTest class MainActivityTest { companion object { @BeforeClass @JvmStatic fun enableAccessibilityChecks() { AccessibilityChecks.enable() .setRunChecksFromRootView(true) } } @Test fun testAccessibility() { ActivityScenario.launch(MainActivity::class.java).onActivity { onView(withId(R.id.button_small)).perform(click()) } } } Android Test Framework for Androidを使ったUIテスト Androidのいろいろなアクセシビリティテスト min
23. Android Test Framework for Androidを使ったUIテスト com.google.android.apps.common.testing.accessibility.framework.integrations.AccessibilityViewCheckExcepti on: There was 1 accessibility error: AppCompatTextView{ id=2131165219, res-name=button_small, visibility=VISIBLE, width=27, height=32, has-focus=true, has-focusable=true, has-window-focus=true, is-clickable=true, is-enabled=true, is-focused=true, is-focusable=true, …… input-type=0, ime-target=false, has-links=false }: View falls below the minimum recommended size for touch targets. Minimum touch target size is 48x48dp. Actual size is 27x32dp. Androidのいろいろなアクセシビリティテスト min
24. fastlane-plugin-accessibility_testを使った完全⾃動UIテスト Androidのいろいろなアクセシビリティテスト min
25. fastlane-plugin-accessibility_testを使った完全⾃動UIテスト ‧Firebase Test Labで⾃動実機テストを⾛らせてアクセシビリティ に関する問題をスキャンできる ‧内部ではAndroid Test Framework for AndroidをPure Javaに 書き換えたものを使っているため、Pre-launchレポート相当の 結果が出⼒される ‧CATSチームが作成したオープンソースのfastlaneプラグイン Androidのいろいろなアクセシビリティテスト min
26. fastlane-plugin-accessibility_testを使った完全⾃動UIテスト Androidのいろいろなアクセシビリティテスト min
27. fastlane-plugin-accessibility_testのメリット ‧テストコードを書く必要がない ‧CIに組み込んで、GitHubで結果を確認できる ‧グラフィカルに結果を確認できる Androidのいろいろなアクセシビリティテスト min
28. min まとめ
29. ‧テスト⽤のツールが充実しているので、うまく駆使して負担を減らす ‧最終的なチェックは必ず実機を⾃分で触ってみる ‧アクセシビリティの⾼いアプリを開発すればリーチできる  ユーザーが増える まとめ min ‧Androidのアクセシビリティ対応はまずMaterial Design Guideline
30. ありがとうございました https://twitter.com/itometeam https://github.com/itome https://medium.com/@itometeam 塚本 武志