Name des Kontrollkästchens

Jedes CheckBox-Element sollte einen zugänglichen Namen haben, der für unterstützende Technologien wie TalkBack und Voice Access verfügbar ist.

Auswirkung

Personen, die TalkBack verwenden, sind von den durch diese Regel festgestellten Zugänglichkeitsproblemen am stärksten betroffen.

Bestätigung

1. TalkBack aktivieren
2. Versuchen Sie, den Fokus auf die Steuerelemente zu legen
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht barrierefrei: TalkBack gibt nur den Wert und die Rolle bekannt.
   • Barrierefrei: Sowohl der Name als auch der Wert werden von TalkBack gelesen.

So beheben Sie das Problem

XML

Geben Sie einen eindeutigen Namen für das CheckBox Steuerelement an, indem Sie ein TextView Element verwenden und es mit Ihrem CheckBox Element verknüpfen.

CheckBox checkBox = .......; // Role: CheckBox
TextView label = .......; // Role: Label
label.setLabelFor(checkBox.getId()); // Associate the Checkbox with its Name

Compose

Fügen Sie das Kontrollkästchen und die Textkomponente in ein Element mit der Checkbox Barrierefreiheitsrolle ein und stellen Sie sicher, dass die Aktion des Steuerelements für die übergeordnete Komponente aufgerufen werden kann.

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

Hinweis: Die Kontrollkästchenkomponente von React Native ist veraltet. Dies gilt daher nur bei Verwendung einer Kontrollkästchenkomponente eines Drittanbieters oder beim Erstellen einer benutzerdefinierten Komponente.

Um ein Kontrollkästchen und eine Beschriftung in React Native zu kombinieren, können Sie beide Komponenten in eine TouchableOpacity Komponente einschließen:

<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>

Um sicherzustellen, dass dies gut funktioniert und den erforderlichen Kontext sowohl für Benutzer unterstützender als auch nicht unterstützender Technologien bereitstellt: – Stellen Sie sicher, dass die TouchableOpacity Eigenschaft der Ansicht accessible auf „true“ gesetzt ist, damit die Gruppe für Benutzer unterstützender Technologien gemeinsam fokussiert ist.

– Stellen Sie sicher, dass die accessibilityLabel Eigenschaft der TouchableOpacity Komponente auf genau denselben Wert wie die Textbeschriftung eingestellt ist.

• Setzen Sie die accessibilityRole der TouchableOpacity-Komponente auf checkbox, um Benutzern unterstützender Technologien den richtigen Kontext bereitzustellen.

• Setzen Sie die CheckBox Komponenten importantForAccessibility Eigenschaft auf no-hide-descendants, sodass die Komponente nicht einzeln fokussiert werden kann.

– Fügen Sie via onPress der Komponente TouchableOpacity eine Aktion hinzu, um das Verhalten des Kontrollkästchens bei Aktivierung zu handhaben.