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

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

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

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

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

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

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

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

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

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

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

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

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

次のスニペットでは、タップ ターゲットを大きくすることで、小さな 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.ButtonRole.Switch など)を使用して、UI 要素のタイプを公開します。これにより、スクリーン リーダーが要素を正しく読み上げることができます。

  • 説明が冗長にならないようにしてください。たとえば、アプリ内であるボタンを選択すると「送信」アクションが行われる場合、ボタンの説明は "Submit" ではなく、"Submit button" とします。

  • 各説明は固有のものにする必要があります。それにより、スクリーン リーダーのユーザーは、要素の説明が繰り返されたときに、フォーカスされている要素が、前にもフォーカスされた要素だと正しく認識できます。特に、LazyColumn などのリスト内の各アイテムには、異なる説明を記述する必要があります。各説明は、特定のアイテムに固有のコンテンツ(場所のリスト内の都市名など)を反映したものにします。

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

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

参考情報

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

Codelab

動画

Views のコンテンツ