このページは Cloud Translation API によって翻訳されました。

Compose のユーザー補助機能を改善する主な手順

ユーザー補助機能を必要とするユーザーがアプリを適切に使用できるように、主要なユーザー補助機能の要件に対応できます。

タップターゲットの最小サイズを検討する

クリック、タップなど、ユーザーが操作できる画面上の要素はすべて、確実に操作できるよう十分な大きさにする必要があります。これらの要素のサイズを設定する際は、マテリアルデザインに沿って最小サイズを 48 dp に設定するユーザー補助ガイドラインをご覧ください。

マテリアルコンポーネント（Checkbox、RadioButton、Switch、 Slider、Surface - この最小サイズを内部で設定します。ただし、コンポーネントがユーザー操作を受け取れる条件を指定します。たとえば、Checkbox に onCheckedChange パラメータが null 以外の値に設定されている場合、このチェックボックスには幅と高さを 48 dp 以上にする必要があります。

@Composable
private fun CheckableCheckbox() {
    Checkbox(checked = true, onCheckedChange = {})
}AccessibilitySnippets.kt

onCheckedChange パラメータが null に設定されている場合、パディングは調整されません。コンポーネントを直接操作できないためです。

@Composable
private fun NonClickableCheckbox() {
    Checkbox(checked = true, onCheckedChange = null)
}AccessibilitySnippets.kt

選択コントロール（Switch、RadioButton、 Checkbox の場合、通常はクリック可能な動作を親コンテナにリフトします。コンポーザブルのクリックコールバックを null に設定し、toggleable または selectable 修飾子を親コンポーザブルに追加します。

@Composable
private fun CheckableRow() {
    MaterialTheme {
        var checked by remember { mutableStateOf(false) }
        Row(
            Modifier
                .toggleable(
                    value = checked,
                    role = Role.Checkbox,
                    onValueChange = { checked = !checked }
                )
                .padding(16.dp)
                .fillMaxWidth()
        ) {
            Text("Option", Modifier.weight(1f))
            Checkbox(checked = checked, onCheckedChange = null)
        }
    }
}AccessibilitySnippets.kt

クリック可能なコンポーザブルのサイズがタップターゲットの最小サイズより小さい場合、Compose はタップターゲットのサイズを大きくします。そのために、タップターゲットのサイズをコンポーザブルの境界外に配置する必要があります。

以下の例には、非常に小さいクリック可能な Box が含まれています。タップターゲット領域は Box の境界を超えて自動的に拡張されるため、横にある Box でもクリックイベントがトリガーされます。

@Composable
private fun SmallBox() {
    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)
                .size(1.dp)
        )
    }
}AccessibilitySnippets.kt

異なるコンポーザブルのタッチ領域間で重複が発生するのを防ぐには、常にコンポーザブルに十分な大きさの最小サイズを使用します。この例では、 sizeIn 修飾子を使用して、内側のボックスの最小サイズを設定することを意味します。

@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)
        )
    }
}AccessibilitySnippets.kt

クリックラベルを追加する

クリックラベルを使用して、コンポーザブルのクリック動作に意味論的意味を追加できます。クリックラベルは、ユーザーが作成します。ユーザー補助サービスでは、クリックラベルを使用してアプリの説明をお手伝いします。サポートしています。

clickable 修飾子でパラメータを渡してクリックラベルを設定します。

@Composable
private fun ArticleListItem(openArticle: () -> Unit) {
    Row(
        Modifier.clickable(
            // R.string.action_read_article = "read article"
            onClickLabel = stringResource(R.string.action_read_article),
            onClick = openArticle
        )
    ) {
        // ..
    }
}AccessibilitySnippets.kt

または、クリック可能な修飾子にアクセスできない場合は、セマンティクス修飾子のクリックラベル:

@Composable
private fun LowLevelClickLabel(openArticle: () -> Boolean) {
    // R.string.action_read_article = "read article"
    val readArticleLabel = stringResource(R.string.action_read_article)
    Canvas(
        Modifier.semantics {
            onClick(label = readArticleLabel, action = openArticle)
        }
    ) {
        // ..
    }
}AccessibilitySnippets.kt

視覚要素を説明する

Image コンポーザブルまたは Icon コンポーザブルを定義する場合、 Android フレームワークがアプリを自動で理解する仕組み表示されます。視覚要素のテキストによる説明を渡す必要があります。

ユーザーが現在のページを友だちと共有できる画面があるとします。この画面には、クリック可能な共有アイコンがあります。

アイコンだけでは、Android フレームワークではアイコンを視覚的に表現することはできません。サポートします。Android フレームワークでは、追加のテキストによる説明が必要です。クリックします。

contentDescription パラメータは視覚要素を記述します。ローカライズされた文字列です。

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

一部の視覚要素は純粋に装飾的なものであり、何かを伝えることはしたくないユーザーに提供しますcontentDescription パラメータを null に設定すると、この要素が関連付けられていないことを Android フレームワークに通知する定義できます。

@Composable
private fun PostImage(post: Post, modifier: Modifier = Modifier) {
    val image = post.imageThumb ?: painterResource(R.drawable.placeholder_1_1)

    Image(
        painter = image,
        // Specify that this image has no semantic meaning
        contentDescription = null,
        modifier = modifier
            .size(40.dp, 40.dp)
            .clip(MaterialTheme.shapes.small)
    )
}AccessibilitySnippets.kt

特定の視覚要素に contentDescription が必要かどうかは自由に決定できます。その要素がどのような情報を伝えるかをユーザーがタスクを実行する必要があります。そうでない場合は、説明します。

要素を結合する

TalkBack やスイッチアクセスなどのユーザー補助サービスでは、ユーザーは画面上の要素間でフォーカスを移動できます。適切な粒度で要素がフォーカスされることが重要です。画面上のすべての低レベルのコンポーザブルが、フォーカスが独立しているため、ユーザーは画面上を移動するために何度も操作する必要があります。過度に積極的に要素を結合すると、ユーザーは要素は同じ

コンポーザブルに clickable 修飾子を適用すると、Compose がコンポーザブルに含まれるすべての要素を自動的に結合します。これは ListItem、要素を結合することで、より効率的にサービスはそれらを 1 つの要素とみなします。

論理グループを形成するコンポーザブルのセットを持つことはできますが、そのグループはクリック可能ではなく、リストアイテムの一部でもありません。アクセシビリティと 1 つの要素として表示できます。たとえば、24 時間 365 日のは、ユーザーのアバター、名前、その他の情報を表示します。

ユーザー名を含む UI 要素のグループ。名前が選択されています。

mergeDescendants を使用すると、Compose でこれらの要素を結合できるようになります。パラメータで semantics パラメータを指定しています。このように結合された要素と、子孫のすべてのセマンティクスプロパティのみを選択する統合されます

@Composable
private fun PostMetadata(metadata: Metadata) {
    // Merge elements below for accessibility purposes
    Row(modifier = Modifier.semantics(mergeDescendants = true) {}) {
        Image(
            imageVector = Icons.Filled.AccountCircle,
            contentDescription = null // decorative
        )
        Column {
            Text(metadata.author.name)
            Text("${metadata.date} • ${metadata.readTimeMinutes} min read")
        }
    }
}AccessibilitySnippets.kt

ユーザー補助サービスはコンテナ全体を一度にフォーカスするようになり、内容:

ユーザー名を含む UI 要素のグループ。すべての要素がまとめて選択されています。

カスタムアクションを追加する

以下のリストアイテムをご覧ください。

記事タイトル、著者、ブックマークアイコンを含む一般的なリストアイテム。

Talkback などのスクリーンリーダーを使用して、まずアイテム全体が選択され、次にブックマークアイコンが選択されます。

すべての要素がまとめて選択されたリストアイテム。

ブックマークアイコンのみが選択されたリストアイテム。

長いリストは、繰り返しが多い場合があります。よりよいアプローチは、ユーザーがアイテムをブックマークできるカスタムアクションを定義します。留意点ブックマークアイコンの動作を明示的に削除して、ユーザー補助サービスによって選択されないようにすることができます。このこれは clearAndSetSemantics 修飾子を使用して行います。

@Composable
private fun PostCardSimple(
    /* ... */
    isFavorite: Boolean,
    onToggleFavorite: () -> Boolean
) {
    val actionLabel = stringResource(
        if (isFavorite) R.string.unfavorite else R.string.favorite
    )
    Row(
        modifier = Modifier
            .clickable(onClick = { /* ... */ })
            .semantics {
                // Set any explicit semantic properties
                customActions = listOf(
                    CustomAccessibilityAction(actionLabel, onToggleFavorite)
                )
            }
    ) {
        /* ... */
        BookmarkButton(
            isBookmarked = isFavorite,
            onClick = onToggleFavorite,
            // Clear any semantics properties set on this node
            modifier = Modifier.clearAndSetSemantics { }
        )
    }
}AccessibilitySnippets.kt

要素の状態について説明する

コンポーザブルでは、セマンティクスのために stateDescription を定義できます。 Android フレームワークは、コンポーザブルの状態の読み上げに使用します。対象たとえば切り替え可能なコンポーザブルはまたは「オフ」あります。場合によっては、デフォルトの状態の説明をオーバーライドする必要があるラベルを定義します。そのためには、状態を明示的に指定すると、説明ラベルを確認しておく必要があります。

@Composable
private fun TopicItem(itemTitle: String, selected: Boolean, onToggle: () -> Unit) {
    val stateSubscribed = stringResource(R.string.subscribed)
    val stateNotSubscribed = stringResource(R.string.not_subscribed)
    Row(
        modifier = Modifier
            .semantics {
                // Set any explicit semantic properties
                stateDescription = if (selected) stateSubscribed else stateNotSubscribed
            }
            .toggleable(
                value = selected,
                onValueChange = { onToggle() }
            )
    ) {
        /* ... */
    }
}AccessibilitySnippets.kt

見出しを定義する

アプリは、スクロール可能なコンテナの 1 つの画面に多くのコンテンツを表示することがあります。たとえば、1 つの画面にユーザーが読んでいる記事のすべての内容を表示する場合などです。

スクロール可能なコンテナで記事テキストを表示したブログ投稿のスクリーンショット。

ユーザー補助を必要とするユーザーは、そのような画面を操作するのが困難です。支援見出しとなる要素を指定します。上の例では、サブセクションのタイトルをユーザー補助の見出しとして定義できます。一部 TalkBack などのユーザー補助サービスでは、ユーザーが見出しに見出します。

Compose では、コンポーズ可能な要素を見出しとして示すために、 semantics プロパティ:

@Composable
private fun Subsection(text: String) {
    Text(
        text = text,
        style = MaterialTheme.typography.headlineSmall,
        modifier = Modifier.semantics { heading() }
    )
}AccessibilitySnippets.kt

カスタムコンポーザブルを処理する

アプリ内の特定のマテリアルコンポーネントをカスタム使用する場合は、ユーザー補助に関する考慮事項に留意する必要があります。

マテリアル Checkbox を独自の実装に置き換えるとします。 triStateToggleable 修飾子を付け忘れても、この修飾子はこのコンポーネントのユーザー補助機能のプロパティを指定します

目安として、マテリアルライブラリを使用して、ユーザー補助動作を模倣できます。また、UI レベルではなく、Foundation 修飾子を多用します。修飾子が最初から組み込まれています。

カスタムコンポーネントの実装を複数のユーザー補助サービスを使用して、その動作を検証できます。

参考情報

ユーザー補助: 基本的なコンセプトとすべての Android アプリ開発に共通する手法
利用しやすいアプリを作成する: 主な手順アプリのユーザー補助機能を強化する方法を
アプリを改善する原則アクセシビリティ: アプリのユーザー補助機能を強化する方法を
ユーザー補助機能のテスト: Android のユーザー補助機能のテスト原則とツール