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 塚本 武志