テキスト名を編集

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?