チェックボックス名
すべてのチェックボックス要素には、TalkBackやVoice Accessなどの支援技術に利用可能な名前を設定する必要があります。
影響
このルールによって見つかったアクセシビリティの問題は、TalkBackを利用する人々に最も影響を与えます。
確認
- TalkBackをオンにします
- コントロールをフォーカスしようとする
- 次のいずれかが発生します。
- 非アクセス可能: TalkBackは値と役割のみを発表します。
- アクセス可能: 名前と値の両方がTalkBackによって読み上げられます。
修正方法
XML
を利用してコントロールに明示的な名前を提供し、 CheckBox と関連付けてください TextView 要素と。 CheckBox
と Text のプロパティを同時に使用することはできません。 ContentDescription
CheckBox checkBox = .......; // Role: CheckBox
TextView label = .......; // Role: Label
label.setLabelFor(checkBox.getId()); // Associate the Checkbox with its NameCompose
チェックボックスとテキストコンポーネントを Checkbox アクセシビリティの役割を持つ要素内にラップし、コントロールのアクションが親コンポーネントで呼び出せることを確認してください。
Row(modifier = Modifier
.toggleable(
value = checkedState,
enabled = true,
role = Role.Checkbox,
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>これが適切に機能し、支援技術のユーザーと非支援技術のユーザーの両方に必要なコンテキストを提供するために：
-
のビューには
TouchableOpacityプロパティをtrueに設定し、グループが支援技術ユーザー向けに一緒にフォーカスされるようにします。accessible -
のプロパティは、ラベルのテキストと同じ値に設定してください。
accessibilityLabelコンポーネントのTouchableOpacity -
コンポーネントの
TouchableOpacityを設定して、支援技術ユーザーに適切なコンテキストを提供します。accessibilityRolecheckbox -
コンポーネントの
CheckBoxプロパティがimportantForAccessibilityに設定されていることを確認し、コンポーネントが個別にフォーカスされないようにします。no-hide-descendants -
を介して
onPressにアクションを追加し、チェックボックスがアクティブ化されたときにその動作を処理します。TouchableOpacityコンポーネント