Android accessibility and automated check tools

Transcript

1. Androidアプリの
   アクセシビリティと
   ⾃動テストツール
   CA Y
   

   View Slide

2. ⾃⼰紹介
   https://twitter.com/itometeam
   https://github.com/itome
   https://itome.team
   . min
   塚本武志
   CyberAgent CATS
   

   View Slide

3. Androidアプリのアクセシビリティ
   min
   

   View Slide

4. Androidアプリのアクセシビリティ
   ‧Talkbackを使った⾳声によるガイド
   6min
   過去のスライド https://speakerdeck.com/itome/android-accessibility-suite
   - Android Accessibility Suiteに含まれるTalkback機能を
   使った⾳声ガイド
   - TextViewなどは⾃動でコンテンツが読み上げられる
   - ImageViewやCanvasに直接描画されたテキストは開発者が
   Talkback内容を指定する必要がある
   

   View Slide

5. ‧⽂字⾊と背景⾊のコントラスト
   - ⽂字⾊と背景⾊のコントラストが低いと、⽂字の視認性が悪くなる
   - ⾊覚障害のユーザーだけでなく、⽇光の下でのアプリの使い
   やすさにも影響する
   - マテリアルデザインガイドラインでは⼩さめのテキストでは
   4.5:1以上、⼤きめのテキストでも3:1以上のコントラストが推
   奨されている
   参照リンク https://material.io/design/usability/accessibility.html#color-contrast
   Androidアプリのアクセシビリティ
   6min
   

   View Slide

6. ‧⽂字⾊と背景⾊のコントラスト
   参照リンク https://material.io/design/usability/accessibility.html#color-contrast
   Androidアプリのアクセシビリティ
   6min
   - ⽂字⾊と背景⾊のコントラストが低いと、⽂字の視認性が悪くなる
   - ⾊覚障害のユーザーだけでなく、⽇光の下でのアプリの使い
   やすさにも影響する
   - マテリアルデザインガイドラインでは⼩さめのテキストでは
   4.5:1以上、⼤きめのテキストでも3:1以上のコントラストが推
   奨されている
   

   View Slide

7. ‧⽂字サイズ
   Androidアプリのアクセシビリティ
   6min
   - ⽂字サイズが⼩さいと、視認性が悪くなる
   - タイトルや説明⽂など、テキストのタイプによって推奨の⽂字サイズはさまざま
   - Androidでは、どんなタイプのテキストであっても12sp以上の⽂字サイズを指定することが推奨されている
   

   View Slide

8. ‧⽂字サイズ
   - ⽂字サイズが⼩さいと、視認性が悪くなる
   - タイトルや説明⽂など、テキストのタイプによって推
   奨の⽂字サイズはさまざま
   - Androidでは、どんなタイプのテキストであっても
   12sp以上の⽂字サイズを指定することが推奨されて
   いる
   Androidアプリのアクセシビリティ
   6min
   

   View Slide

9. ‧ボタンのサイズ
   - マテリアルデザインガイドラ
   インでは48dp x dp以上が
   推奨されている
   - ⼩さめのアイコンなど、それ⾃体で推奨
   サイズに届かないボタンは、paddingで
   タップ可能領域を広げる
   参照リンク https://material.io/design/usability/accessibility.html#layout-typography
   Androidアプリのアクセシビリティ
   6min
   

   View Slide

10. ‧その他
    - ボタンのタッチ領域が重ならないようにする
    - TextViewに埋め込まれたURLにTalkbackでもアクセスで
    きるようにする
    - 冗⻑なcontentDescriptionを避ける（ボタンに対して
    「〜のボタン」と読み上げさせるなど）
    - etc
    Androidアプリのアクセシビリティ
    6min
    

    View Slide

11. min
    Androidのいろいろな
    アクセシビリティテスト
    

    View Slide

12. Androidのいろいろなアクセシビリティテスト
    min
    Android StudioのAccessibilityに関するLint
    ‧画像のcontentDescriptionがついているかなど、コード上で
    わかるアクセシビリティ対応を警告で教えてくれる
    

    View Slide

13. Androidのいろいろなアクセシビリティテスト
    min
    Google Play ConsoleのPre-launch report
    

    View Slide

14. Google Play ConsoleのPre-launch report
    ‧内部ではFirebase Test Labを使って実機テストが⾛っている
    ‧網羅的にテストできているわけではないものの、アプリの
    どんな部分に問題があるかに気づくきっかけになる
    ‧Google Play Consoleからアプリをリリースするときに
     アクセシビリティに関する問題を検知してくれる
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

15. https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja
    ユーザー補助検証ツールを使ったテスト
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

16. 実機上で画⾯のスクリーンショット
    を取って⾃動的にテストしてくれる
    https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja
    ユーザー補助検証ツールを使ったテスト
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

17. https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja
    ユーザー補助検証ツールを使ったテスト
    ‧スクリーンショット上の要素であれば全てテスト対象にできるので、
    ソースコードが内部にないアプリや、Webアプリなどの検証にも使える
    ‧必ず⼿動でスキャンする必要があるが、その分テスト対象
    のページを柔軟に変更できる。
    ‧実機テストのサポートをしてくれる。
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

18. https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=ja
    ユーザー補助検証ツールを使ったテスト
    Demo
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

19. Android Test Framework for Androidを使ったUIテスト
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

20. Android Test Framework for Androidを使ったUIテスト
    ‧他のテストツールも基本的にこのライブラリに依存している
    ‧Espresso, Robolectricそれぞれに対応している
    ‧UIテストのコードに数⾏追加することで、UIテストと⼀緒に
    アクセシビリティテストも⾏ってくれる
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

21. テストできる項⽬
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. fastlane-plugin-accessibility_testを使った完全⾃動UIテスト
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

25. fastlane-plugin-accessibility_testを使った完全⾃動UIテスト
    ‧Firebase Test Labで⾃動実機テストを⾛らせてアクセシビリティ
    に関する問題をスキャンできる
    ‧内部ではAndroid Test Framework for AndroidをPure Javaに
    書き換えたものを使っているため、Pre-launchレポート相当の
    結果が出⼒される
    ‧CATSチームが作成したオープンソースのfastlaneプラグイン
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

26. fastlane-plugin-accessibility_testを使った完全⾃動UIテスト
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

27. fastlane-plugin-accessibility_testのメリット
    ‧テストコードを書く必要がない
    ‧CIに組み込んで、GitHubで結果を確認できる
    ‧グラフィカルに結果を確認できる
    Androidのいろいろなアクセシビリティテスト
    min
    

    View Slide

28. min まとめ
    

    View Slide

29. ‧テスト⽤のツールが充実しているので、うまく駆使して負担を減らす
    ‧最終的なチェックは必ず実機を⾃分で触ってみる
    ‧アクセシビリティの⾼いアプリを開発すればリーチできる
     ユーザーが増える
    まとめ
    min
    ‧Androidのアクセシビリティ対応はまずMaterial Design Guideline
    

    View Slide

30. ありがとうございました
    https://twitter.com/itometeam
    https://github.com/itome
    https://medium.com/@itometeam
    塚本 武志
    

    View Slide