Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

min まとめ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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