アプリのユーザー補助機能を強化する

ユーザー補助を必要とするユーザーを含めて、誰にとっても使いやすい Android アプリを目指してください。

視覚、色覚、または聴覚に障がいのある方、細かい作業に支障のある方、認知障がいのある方など、障がいのある多くの方々が Android デバイスを使用しています。ユーザー補助を念頭に置いてアプリを開発すると、補助を必要とするユーザーのエクスペリエンスを高めることができます。

このページでは、誰もが簡単にアプリを使用できるように、ユーザー補助の重要な要素を実装するためのガイドラインを示します。アプリのユーザー補助機能を強化する方法について詳しくは、アプリのユーザー補助機能の改善に関する原則をご覧ください。

テキストの視認性を高める

アプリ内の各テキストについて、色のコントラスト(テキストと背景の色の明るさの差)は、特定の基準値を超えるようにすることをおすすめします。厳密な基準値は、テキストのフォントサイズとテキストの表示が太字かどうかによって異なります。

  • テキストが 18 sp より小さい場合、またはテキストが太字で 14 sp より小さい場合は、色のコントラスト比が 4.5:1 以上になるように前景色と背景色を使用します。
  • それ以外のテキストの場合は、色のコントラスト比を 3:1 以上に設定します。

次の図に、テキストと背景の色のコントラストに関する例を 2 つ示します。

色付きの背景に「Text」という単語が表示されている 2 つの例。左側の例では、テキストと背景の色のコントラストが低くなっています。右側の例では、色のコントラストが十分です。
図 1. 推奨値より低い場合(左)と高い場合(右)の色のコントラスト。

アプリ内でのテキストと背景の色のコントラストを確認するには、オンラインの色のコントラスト チェッカーを使用するか、ユーザー補助検証ツールを使用してください。

大きい、シンプルなコントロールを使用する

アプリの UI を使いやすくするには、見やすくてタップしやすいコントロールを設定します。タッチ インターフェースの場合、操作対象の各 UI 要素には、少なくとも 48 dp x 48 dp のフォーカス可能領域(タップ ターゲット サイズ)を設定することをおすすめします。この領域が大きいほど使いやすくなります。

Jetpack Compose では、Button、IconButton、ListItem などの多くの組み込みマテリアル コンポーネントが、すでにこの最小サイズを適用しています。ただし、カスタム インタラクティブ要素を作成する場合は、サイズを自分で設定する必要があります。

次のスニペットでは、小さな UI 要素に大きなタップ ターゲットを指定することで、ユーザー補助に対応しています。

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}

タップ ターゲットのサイズについて詳しくは、タップ ターゲットの最小サイズをご覧ください。

各 UI 要素について説明する

アプリの UI 要素ごとに、要素の目的についての説明を記述します。通常は、次のコード スニペットに示すように、この説明を要素の contentDescription 属性に含めます。

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}

Text コンポーザブルに contentDescription を指定する必要はありません。Android のユーザー補助サービス(TalkBack など)は、テキスト自体を自動的に読み上げます。

アプリの UI 要素に説明を追加する際は、以下のおすすめの方法にご留意ください。

  • 説明を使用して、視覚的な詳細ではなく、インタラクションの目的と結果を伝えます。Role セマンティクス プロパティ(Role.Button や Role.Switch など)を使用して、UI 要素のタイプを公開します。これにより、スクリーン リーダーは要素を正しく読み上げることができます。

  • 説明の重複を避けます。たとえば、アプリ内であるボタンを選択すると「送信」アクションが行われる場合、ボタンの説明は "Submit button"(送信ボタン)ではなく、"Submit"(送信)とします。

  • 各説明は固有のものにする必要があります。それにより、スクリーン リーダーのユーザーは、要素の説明が繰り返されたときに、フォーカスされている要素が、前にもフォーカスされた要素だと正しく認識できます。特に、LazyColumn などのリスト内の各項目には、それぞれ異なる説明が必要です。たとえば、地域リスト内の都市名のように、各項目に固有の内容をそれぞれの説明に反映させる必要があります。

  • hideFromAccessibility API を使用して、純粋に装飾的な要素をマークし、ユーザー補助サービスがそれらを無視できるようにします。UI 要素に contentDescription パラメータがあるものの、純粋に装飾的なものである場合(別の UI 要素の一部である Icon など)、null を渡して、ラベル付けが重複しないようにします。より複雑なユースケースについては、マージとクリアをご覧ください。

  • コードをテストして、コンテンツの説明が想定どおりに配信されることを確認します。Android Lint、Compose テスト、手動テストツールと自動テストツールを使用すると、一般的な問題にフラグを立て、実装の問題を明らかにできます。

参考情報

アプリのユーザー補助機能を強化する方法について詳しくは、以下の参考情報をご覧ください。

Codelab

動画

コンテンツを閲覧する