テキスト値の編集

チェックする内容

ユーザーがテキストフィールドに入力した際、その入力値はTalkBackやVoice Accessなどの支援技術でプログラム的に利用可能にしなければなりません。

失敗例 ❌

value = 「メールフィールド」

TalkBack `contentDescription`を発表し、入力したテキストではありません
「メールフィールド、編集ボックス」

ユーザーは入力内容を確認、レビュー、修正できません

成功例 ✅

value = 「jsmith@emaik.com」（入力されたテキスト）

TalkBack ラベルと入力値を発表します
「メール、jsmith@emaik.com、編集ボックス」

ユーザーは入力内容を確認し、修正できます

概要

• このルールはユーザーに重大な影響を与えます
• ユーザーは入力内容を確認し、修正するために入力した内容を聞く必要があります
• EditText要素は、その現在の値を支援技術に提供しなければなりません — 単にラベルだけではなく
• contentDescriptionをEditText要素に設定しないでください。これは入力された値を上書きし、TalkBackの発表を妨げます
• フィールド名と値の両方が利用可能なようにsetLabelFor()を使用してフィールドにラベルを関連付けてください

ユーザーへの影響

TalkBackに依存する人々がこの問題で最も影響を受けます。テキスト入力がその値を公開しない場合、ユーザーは入力した内容を聞くことができません。これにより、視覚的な助けなしではユーザー名やパスワード、住所などのフォーム入力を確認、レビュー、修正することが不可能になります。

EditText要素は一貫してその現在の値を提供するべきです。値が正しく公開されると、支援技術は予測可能な入力を伝えることができます。

テキスト値の編集を確認

1. TalkBackをオンにする
2. テキスト入力要素にフォーカスを当てる
3. フィールドにテキストを入力する
4. 以下のいずれかが発生します：
   • アクセシブル: TalkBackは入力されたテキストとそれに関連付けられたラベルを発表します
   • アクセシブルでない: TalkBackは入力値の代わりにコンテンツの説明を発表するか、値を全く発表しません

問題を修正する

Edit Text Valueが失敗する最も一般的な原因は、contentDescriptionを直接EditTextに設定することです。これは、TalkBackが読み上げるはずの値を上書きします。入力要素自体からcontentDescriptionを取り除き、可視ラベルを関連付けることで、フィールド名と入力した値の両方がスクリーンリーダーで利用可能になります。

XML

TextViewラベルをEditTextにsetLabelFor()を使って関連付けてください。contentDescriptionをEditTextそのものに設定しないでください。これはTalkBackが入力値を読み上げるのを妨げます。

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

Compose

可視ラベルを入力に関連付けるためにlabelパラメーターをOutlinedTextFieldで使用してください。contentDescriptionをTextFieldそのものに設定しないでください。これは入力された値を上書きします。

@Composable
fun ZipCodeInput() {
    OutlinedTextField(
        value = zipCode,
        onValueChange = { zipCode = it },
        label = { Text("Zip Code") }
    )
}

React Native

入力の現在の値にaccessibilityLabelプロパティを設定しないようにします。フィールドを説明するように設定し、サンプル値にはplaceholderプロパティを使用してください。これにより、フィールドラベルと入力済みの値が別々に保持され、両方ともアクセス可能になります。

<TextInput 
   accessibilityLabel='Username'
   accessible={true}
   placeholder='John'
   style={{height: 45, width: 200, backgroundColor: 'azure', fontSize: 20, margin:20}}
 /> 

このルールを無視できますか？

Edit Text Valueはユーザーにとって重大な影響です。このルールで見つかった全ての問題を修正することを強くお勧めします。TalkBackに依存するユーザーは、値が公開されていない場合、入力内容を確認したり修正したりできず、フォームの入力完了が不可能になります。詳細はルールの無視をご覧ください。

リソース

Deque Universityコースページ

• 4.1.2 名前、役割、値 (A)
• 成功基準 4.1.2 - 名前、役割、値

注: Deque Universityリソースへの完全なアクセスにはサブスクリプションが必要です。

その他のリソース

• Web Content Accessibility Guidelines (WCAG) 2.0、W3C推奨
  • 成功基準 4.1.2 - 名前、役割、値
• WCAG 2.0 理解のドキュメント
  • 理解 4.1.2 A - 名前、役割、値