Accessibility Test Framework で始める⾃動アクセシビリティテスト shibuya.apk #

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

アプリのアクセシビリティには どんなものがあるの？ min

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

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

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

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

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

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

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

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

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

アプリのアクセシビリティにはどんなものがあるの 3min これらを⼈⼒で全てチェックするのは⼤変

min Accessibility Testing Framework の導⼊

Accessibility Testing Frameworkの導⼊ 5min ‧Accessibility TestingFramework for Androidとは  https://github.com/google/Accessibility-Test-Framework-for-Android

Accessibility Testing Frameworkの導⼊ 5min ‧Accessibility TestingFramework for Androidとは  - 名前の通り、Androidアプリのアクセシビリティを⾃動でテストする ライブラリ - Viewの階層を分析して、アクセシブルでない要素があると教えてくれる - EspressoとRobolectricと連携する機能がある

Accessibility Testing Frameworkの導⼊ 5min ‧導⼊⽅法 dependencies { testImplementation "androidx.test.espresso:espresso-accessibility:$espressoVersion" } 依存ライブラリにespress-accessibilityを追加する

Accessibility Testing Frameworkの導⼊ 5min ‧導⼊⽅法 import androidx.test.espresso.contrib.AccessibilityChecks @RunWith(AndroidJUnit4::class) @LargeTest class AccessibilityChecksIntegrationTest { companion object { @BeforeClass @JvmStatic fun enableAccessibilityChecks() { AccessibilityChecks.enable() } } } UIのテストクラスで、AccessibilityChecksを有効化する

Accessibility Testing Frameworkの導⼊ 5min ‧導⼊⽅法 何らかのViewActionを実⾏すると、⾃動的にAccessibilityCheckが⾛る @Test fun testButtonAccessibility() { onView(withId(R.id.button)).perform(click()) }

Accessibility Testing Frameworkの導⼊ 5min ‧テストできる項⽬

Accessibility Testing Frameworkの導⼊ 5min ‧テストできる項⽬ ClickableViewSpanCheck - URLSpan（テキストに含まれるリンク）に関するチェック - URLが絶対パスになっているか、ClickableSpanの中で使われて いるかをチェックしてくれる DuplicateClickableBoundsViewCheck - ボタンのタッチ領域が排他的になっているか（重なっていないか） をチェックしてくれる

Accessibility Testing Frameworkの導⼊ 5min ‧テストできる項⽬ DuplicateSpeakableTextViewHierachyCheck - TalkBackの読み上げが同じになっているViewがないかをチェック してくれる EditableContentDescriptionViewCheck - 編集可能なTextViewにContentDescriptionが付いていないかチェック してくれる  （編集可能なTextViewのTalkbackは android:hint で提供されるため)

Accessibility Testing Frameworkの導⼊ 5min ‧テストできる項⽬ RedundantContentDescriptionViewCheck - 冗⻑な読み上げ⽂（ボタンに対して「〜のボタン」と読み上げるな ど）になっていないかをチェックしてくれる。 SpeakableTextPresentViewCheck - 読み上げ可能なViewにきちんと読み上げ⽂がついているかをチェック してくれる - 英語のみ

Accessibility Testing Frameworkの導⼊ 5min ‧テストできる項⽬ TextContrastViewCheck - テキストと背景⾊のコントラストが、ガイドラインを満たしている かをチェックしてくれる TouchTargetSizeViewCheck - ボタンのタッチ領域が、ガイドラインを満たしているかをチェックして くれる

min 実際にやってみる

実際にやってみる 4min ‧今回テストするサンプルアプリ

実際にやってみる 4min ‧テストクラス @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()) } } }

実際にやってみる 4min ‧テストクラスを⾛らせるとエラーが発⽣ java.lang.NoSuchMethodError: com.google.android.apps.common.testing.accessibility.framework.integrations.espresso.AccessibilityValidato r.checkAndReturnResults(Landroid/view/View;)Lcom/google/common/collect/ImmutableList; at androidx.test.espresso.accessibility.AccessibilityChecks$2.check(AccessibilityChecks.java:65) at androidx.test.espresso.action.ViewActions$1.perform(ViewActions.java:130) at androidx.test.espresso.ViewInteraction$SingleExecutionViewAction.perform(ViewInteraction.java:366) at androidx.test.espresso.ViewInteraction.doPerform(ViewInteraction.java:255) at androidx.test.espresso.ViewInteraction.access$100(ViewInteraction.java:65) ライブラリの中で使われているjava.util.ListがなぜかGuavaのListとして扱われている → 解決できず（泣）

実際にやってみる 4min ‧解決⽅法（あくまでワークアラウンド） Accessibility Testing FrameworkのEspresso連携を諦める Accessibility Testing Frameworkを直接使って、Viewの階層をテスト

実際にやってみる 4min ‧解決⽅法（あくまでワークアラウンド） object AccessibilityChecker { fun check(root: View?, ignore: Matcher? = null) { if (root == null) throw NullPointerException() val validator = AccessibilityValidator() .setResultDescriptor(object : AccessibilityCheckResult.AccessibilityCheckResultDescriptor() { override fun describeView(view: View?): String { return HumanReadables.describe(view) } }) .setSuppressingResultMatcher(ignore) val originalPolicy = StrictMode.allowThreadDiskWrites() try { validator.checkAndReturnResults(root) } finally { StrictMode.setThreadPolicy(originalPolicy) } } }

実際にやってみる 4min ‧解決⽅法（あくまでワークアラウンド） @RunWith(AndroidJUnit4::class) @LargeTest class MainActivityTest { @Test fun testAccessibility() { ActivityScenario.launch(MainActivity::class.java).onActivity { activity -> AccessibilityChecker.check(activity.findViewById(android.R.id.content)) } } }

実際にやってみる 4min ‧テスト結果

実際にやってみる 4min ‧テスト結果 com.google.android.apps.common.testing.accessibility.framework.integrations.AccessibilityViewCheckExcept ion: 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.

実際にやってみる 4min ‧テスト結果 com.google.android.apps.common.testing.accessibility.framework.integrations.AccessibilityViewCheckExcept ion: 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.

実際にやってみる 4min ‧テスト結果をもとに修正

実際にやってみる 4min ‧テスト結果をもとに修正

実際にやってみる 4min ‧テスト結果をもとに修正

まとめ min

まとめ 2min ‧Accessibility Testing Frameworkを使うことで、アクセシビリティ に対応するコストが減らせそう ‧ドキュメントが少ないので、バグにハマると解決に時間がかかる ‧もちろん⾃動テストだけで⼗分なわけではないので、実際に⾃分で 使ってみたり、ユーザーテストをしたりすることも⼤事

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