テキスト名を編集

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

支援技術のためにテキスト入力フィールドがラベル付けされていることを確認してください

Not for use with personal data

WCAG 2.0 - 4.1.2 A Impact - Serious

チェック項目

テキスト入力要素は、TalkBackやVoice Accessのような支援技術のためにアクセス可能な名前を持っていなければなりません。

不適合例 ❌

Android phone screen showing a form with an unlabeled text input field. A TalkBack focus ring is around the field. A speech bubble reads 'Edit text.'

テキスト入力にはアクセス可能な名前がありません。

TalkBack は "Edit text."

Voice Access と読み上げます — ユーザーはフィールドを有効にするために話しかけるラベルがありません。

適合例 ✅

Android phone screen showing a form with a text input field labeled 'Email address'. A TalkBack focus ring is around the field. A speech bubble reads 'Email address, Edit text.'

テキスト入力は可視ラベルと labelForを参照してください。

TalkBack は "Email address, Edit text."

Voice Access と読み上げます — ユーザーは「メールアドレス」と話してフィールドを有効にします。

一目で分かる

  • このルールはユーザーに重大な影響を与えます
  • すべてのテキスト入力フィールドには、支援技術が伝えることのできるラベルが必要です
  • プレースホルダーテキストはラベルの代わりにはなりません
  • アイコンのみの入力には、内容の説明が必要です
  • ラベルのないフィールドは、画面リーダーを使用するユーザーに内容についてのヒントを与えません

ユーザーへの影響

視覚障害があり、TalkBackを使用してアプリをナビゲートする人々は、このルールによって発見された問題の影響を直接受けます。テキスト入力にアクセス可能な名前がない場合、TalkBackは「テキストを編集」としかアナウンスしないため、ユーザーは何を入力すればよいかわかりません。これは特に複数のフィールドがあるフォームでの混乱の原因になります。

すべてのフォームフィールドに可視で永続的なラベルを使用してください。プレースホルダーテキストは、入力が始まると消えてしまうため、ラベルの代わりにはなりません。

EditText と TextField 要素は、Android OS が期待する場所にラベル情報を提供し、支援技術が入力要素の目的を予測可能に伝えられるようにする必要があります。

テキスト名の問題を確認

  1. TalkBackをオンにする
  2. テキスト入力要素にフォーカスを当てる
  3. 次のいずれかが発生します:
    • アクセス不可: TalkBack はラベルなしで「テキストを編集」とのみ発表するか、予期しない順番で情報を発表します
    • アクセス可（デフォルト値、フィールドが空の場合）: TalkBack はフィールドのラベルの後に「テキストを編集」と発表します（例：「ユーザー名、テキストを編集」）
    • アクセス可（ユーザーがフィールドに値を入力した場合）: TalkBack はユーザーが入力した値 + 「編集テキスト」 + 関連付けられたラベルの Text を発表します（例：「'help@deque.com'、'メールアドレス'用の編集テキスト」）

問題を修正

テキスト名の問題を解決するには、入力フィールドに可視ラベルを関連付けます。可視ラベルが存在しない場合やアイコンを使用する場合は、内容の説明を提供してください。

XML

TextView ラベルを EditText に setLabelFor を使用して明示的に関連付けます。

EditText editText = .......; // Role: EditText
TextView label = .......; // Role: Label
label.setLabelFor(editText.getId()); // Associate the label with the field

Compose

組み込みの label パラメータを OutlinedTextField または TextField に使用してアクセシブルな名前を提供します。アイコンのみの入力には内容の説明を提供してください。

@Composable
private fun LabeledTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        visualTransformation = VisualTransformation.None,
        label = { Text(stringResource(R.string.address_label)) }
    )
}

@Composable
private fun IconsWithDescriptionTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        label = {
            Icon(
                painter = painterResource(id = R.drawable.ic_location),
                contentDescription = stringResource(id = R.string.address_content_description)
            )
        }
    )
}

React Native

テキスト要素を対応するテキストフィールドに関連付けるには、aria-labelledby プロパティを使用し、ラベルの nativeID を参照します。

<Text
  style={{height: 70, width: 150, fontSize: 20, marginTop: 10}} 
  aria-label="Username"
  nativeID="labelUsername">
  Username
</Text>

<TextInput
  style={{height: 50, width: 200, backgroundColor: 'azure', fontSize: 20}} 
  aria-label="input"
  aria-labelledby="labelUsername"
  placeholder='John'
 />

このルールを無視してもよいですか？

編集テキスト名はユーザーにとっての 重大な影響 があります。この問題をほぼすべてのケースで修正することをお勧めします。画面リーダー利用者にとってラベルのないテキストフィールドは使用できません。例外として、周囲のコンテキストから目的が明らかに分かる検索フィールドのような稀な状況では、ルールを抑制することを検討しても良いかもしれませんが、それは例外であり、通常ではないべきです。ルールの無視について について詳しく学んでください。

リソース

Deque University 課程ページ

注：Deque University のリソースにフルアクセスするには、サブスクリプションが必要です。

その他のリソース

Is this page helpful?

Help us improve this page

Still need help?