ユーザー補助をテストするうえで不可欠な方法が、手動テストです。TalkBack やスイッチ アクセスなどのユーザー補助サービスを有効にして、すべてが想定どおりに動作するかどうかを確認します。これにより、ユーザー補助機能を必要とするユーザーがアプリケーションをどのように操作するかを直接把握できます。
手動検証に加えて、自動テストも使用して、アプリに継続的な変更を加える際にユーザー エクスペリエンスに影響を与える可能性のある問題を特定する必要があります。
既存の Compose テスト API を使用すると、セマンティック要素を操作する自動テストを作成し、UI で定義されたプロパティをアサートできます。
ユーザー補助のチェック
ユーザー補助機能の自動テストでは、ユーザー補助テスト フレームワーク(ユーザー補助検証ツールと Espresso のユーザー補助機能チェックを強化する同じ基盤フレームワーク)を使用して、Compose 1.8.0 以降、ユーザー補助機能に関連するチェックを自動的に実行することもできます。
チェックを有効にするには、ui-test-junit4-accessibility 依存関係を追加し、AndroidComposeTestRule で enableAccessibilityChecks() を呼び出して、アクションまたは tryPerformAccessibilityChecks をトリガーします。
@Rule @JvmField val composeTestRule = createAndroidComposeRule<ComponentActivity>() @Test fun noAccessibilityLabel() { composeTestRule.setContent { Box( modifier = Modifier .size(50.dp, 50.dp) .background(color = Color.Gray) .clickable { } .semantics { contentDescription = "" } ) } composeTestRule.enableAccessibilityChecks() // Any action (such as performClick) will perform accessibility checks too: composeTestRule.onRoot().tryPerformAccessibilityChecks() }
この特定のテストは、例外と、アイテムにユーザー補助サービスで読み取り可能なラベルがない可能性があるというメッセージで失敗します。
他にも、色のコントラスト、タップ ターゲットのサイズが小さい問題、要素の移動順序など、ユーザー補助に関する問題を確認できます。
ビューと Compose を組み合わせて使用していて、すでに AccessibilityValidator を使用している場合、または AccessibilityValidator を構成する必要がある場合は、ルールで設定できます。
@Test fun lowContrastScreen() { composeTestRule.setContent { Box( modifier = Modifier .fillMaxSize() .background(color = Color(0xFFFAFBFC)), contentAlignment = Alignment.Center ) { Text(text = "Hello", color = Color(0xFFB0B1B2)) } } // Optionally, set AccessibilityValidator manually val accessibilityValidator = AccessibilityValidator() .setThrowExceptionFor( AccessibilityCheckResult.AccessibilityCheckResultType.WARNING ) composeTestRule.enableAccessibilityChecks(accessibilityValidator) composeTestRule.onRoot().tryPerformAccessibilityChecks() }
手動テストと、Compose API とユーザー補助機能テスト フレームワークの両方を使用した自動テストを組み合わせることで、開発プロセスの早い段階で潜在的な問題を検出できます。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Compose のユーザー補助
- [Compose のマテリアル デザイン 2][19]
- Compose レイアウトのテスト