チェックボックス名
確認項目
すべてのチェックボックス要素には、TalkBackやVoice Accessなどの支援技術に利用可能な名前を設定する必要があります。
失敗例 ❌
name ＝ {none}
TalkBack は値と役割のみをアナウンスします
"Checked, CheckBox"
Voice Access － ユーザーが "ニュースレターを購読" と言います
名前がないため、これはチェックボックスをアクティベートしません
成功例 ✅
name ＝ "ニュースレターを購読"
TalkBack はアナウンスします the name, value, and role
"ニュースレターを購読, Checked, CheckBox"
Voice Access － ユーザーが "ニュースレターを購読" と言います
名前が一致するため、これはチェックボックスをアクティベートします
概要
- このルールはユーザーに大きな影響を与えます
- すべてのチェックボックスには名前が必要です：TalkBackやVoice Accessを利用するユーザーはチェックボックスを識別し、操作できる必要があります
- 視覚的なラベルを関連付けてください：チェックボックスにリンクされた
TextView（XML）またはTextコンポーネント（Compose）を使用します TextとContentDescriptionプロパティを同時に使用しないでください — これらは互いに競合します
ユーザーへの影響
このルールで検出された問題は、TalkBackやVoice Accessなどの支援技術を使用している人々に最も影響があります。
CheckBoxにアクセス可能な名前がない場合、TalkBackは値と役割だけをアナウンスします — 例えば、「Checked, CheckBox」— ユーザーは選択している内容のコンテキストがわからず、追加の探索なしではそのコントロールの目的を理解することが不可能になり、Voice Accessユーザーはラベルを話すことでチェックボックスをアクティベートできなくなります。
CheckBox名前の問題を確認
- TalkBackをオンにします
- コントロールをフォーカスしようとする
- 次のいずれかが発生します。
- 非アクセス可能: TalkBackは値と役割のみを発表します。
- アクセス可能: 名前と値の両方がTalkBackによって読み上げられます。
問題を修正
CheckBox名前の問題を解決するには、すべてのチェックボックスにアクセス可能な名前を持たせ、視覚的なテキストラベルを関連付けてください。これにより、TalkBackはチェックボックスの値と役割に加えて意味のある名前をアナウンスします。Voice Accessのユーザーは、ラベルを話してチェックボックスをアクティベートできるようになります。
XML
TextViewをCheckBoxとlabelFor属性を使用して関連付けます。これにより、視覚的なラベルがチェックボックスにリンクされ、TalkBackがチェックボックスのアクセス可能な名前としてラベルテキストをアナウンスします。
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:id="@+id/subscribe_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subscribe to newsletter"
android:labelFor="@id/subscribe_checkbox" />
</LinearLayout> ビューがプログラム的に作成される場合、またはXMLで関連付けできない場合は、コード内でラベルをチェックボックスにリンクするためにsetLabelForを使用してください。
TextView label = findViewById(R.id.checkbox_label);
CheckBox checkBox = findViewById(R.id.subscribe_checkbox);
label.setLabelFor(checkBox.getId());すでに視覚的なテキストラベルを使用している場合、ContentDescriptionをCheckBoxに設定しないでください。両方が存在すると、TalkBackはContentDescriptionの値を読み上げ、ラベルを無視してしまい、画面に表示されるものとアナウンスされるものが不一致になります。
Compose
Checkboxとテキスト要素をCheckboxのアクセシビリティ役割を持つ親要素内にラップし、チェックボックスのアクションが親要素を選択することにより実行されるようにしてください。
Row(modifier = Modifier
.toggleable(
value = checkedState,
enabled = true,
role = Role.Checkbox, // Parent element has the accessibility role
onValueChange = { setCheckBoxState(!checkedState) } //
)
.semantics(mergeDescendants = true) { }
.constrainAs(labeledTextField) {
setConstraints(top = parent.top, start = parent.start, end = parent.end)
}
) {
Checkbox(
checked = checkedState,
modifier = Modifier.padding(16.dp),
onCheckedChange = null
)
Text(text = "Get Marketing emails", modifier = Modifier.padding(16.dp))
}React Native
注：React Nativeのチェックボックスコンポーネントは廃止されましたので、サードパーティのチェックボックス要素を使用する場合やカスタム要素を作成する場合のみ適用されます。
React Nativeでチェックボックスとラベルを組み合わせるには、TouchableOpacity内で両方の要素をラップできます：
<TouchableOpacity
style={{flexDirection:'row', alignItems: 'center',}}
onPress={() => {
setSelection(!isSelected)
}
}
accessible={true}
accessibilityLabel={"Do you like React Native?"}
accessibilityRole='checkbox'>
<CheckBox
importantForAccessibility='no-hide-descendants'
value={isSelected}
onValueChange={setSelection}
style={styles.checkbox}
/>
<Text>Do you like React Native?</Text>
</TouchableOpacity>これがすべてのユーザーに正しく機能するようにするためには：
accessible={true}をTouchableOpacityに設定し、支援技術がグループを単一の要素としてフォーカスするようにしますaccessibilityLabelを視覚的なテキストラベルと正確に一致するように設定しますaccessibilityRoleをcheckboxに設定し、支援技術のユーザーに正しいコンテキストを提供しますimportantForAccessibility='no-hide-descendants'をCheckBoxに設定し、個々にフォーカスできないようにします- チェックボックストグルを処理するための
onPressアクションをTouchableOpacityに追加します
このルールを無視しても良い？
CheckBox Nameにはユーザーに対する重大な影響があり、ほぼすべてのケースでこの問題を改善することをお勧めします。アクセス可能な名前を持たないチェックボックスは支援技術ユーザーにコンテキストを提供せず、Voice Accessのインタラクションを完全に妨げます。ルールの無視について詳しく学んでください。
リソース
Deque University コースのページ
-
ネイティブモバイルAndroidをご覧ください 4.1.2 名前、役割、値 (A)
注：Deque Universityリソースへの完全なアクセスにはサブスクリプションが必要です。
その他のリソース
- Webコンテンツアクセシビリティガイドライン (WCAG) 2.1、W3Cによる勧告