Name des Schalters

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

Auswirkung

Ein Schalter sollte einen Namen haben, der den Kontext und die Erwartung vermittelt, was passiert, wenn er ein- oder ausgeschaltet wird, insbesondere für Menschen mit Sehschwäche oder Blindheit.

Bestätigung

1. TalkBack aktivieren
2. Versuchen Sie, sich auf eine Switch Kontrolle zu konzentrieren
3. Eines der folgenden Ereignisse wird eintreten:
   • Nicht zugänglich: TalkBack gibt nur „Ein“ oder „Aus“ an.
   • Zugänglich: TalkBack sagt den Namen des Schalters und „Ein“ oder „Aus“ an.

So beheben Sie das Problem

XML

Sie können im benachbarten Element eine Beschriftung bereitstellen oder den Schalter mit seiner Beschriftung umschließen. Sie können contentDescription auch manipulieren, achten Sie jedoch darauf, den Status „Ein“ und „Aus“ für TalkBack-Ankündigungen beizubehalten.

layouts/activity.xml
<TextView
     android:id="@+id/label"
     android:text="@string/label_text"
     android:labelFor="@+id/switch">
<Switch
     android:id="@+id/switch"/>

...

strings.values/
<string name="label_text">Dark Mode</string>

Compose

Fügen Sie im folgenden Beispiel Text und Schalter in einem zusammengeführten Compose-Layout wie einer Zeile zusammen. Fügen Sie mit Modifier.clearAndSetSemantics { } dem Text eine Schalterrolle und einen umschaltbaren Modifikator hinzu und löschen Sie dann die Semantik des Schalters. Dadurch konzentriert sich TalkBack auf die Beschriftung, nicht aber auf den Schalter.

val (isSwitchChecked, setSwitchState) = remember { 
    mutableStateOf(true) 
}

Row(modifier = Modifier.semantics(mergeDescendants = true) { }) {
    Text(
        text = "Get Emails",
        modifier = Modifier
            .toggleable(
                value = isSwitchChecked,
                onValueChange = { 
                    setSwitchState(!isSwitchChecked) 
                },
                role = Role.Switch
            )
    )

    Switch(
        checked = isSwitchChecked,
        onCheckedChange = { 
            setSwitchState(!isSwitchChecked) 
        },
        modifier = Modifier
            .clearAndSetSemantics { }
    )
}

React Native

Um einen Schalter und ein Label in React Native zu kombinieren, können Sie beide Komponenten in eine TouchableOpacity Komponente einschließen:

<TouchableOpacity
   onPress={() => {
     setSwitchOn(!switchOn)
     Alert.alert("Switch on : " + !switchOn)}}
   style={styles.subContainer}
   accessible={true}
   accessibilityLabel={"Subscribe"}
   accessibilityRole='switch'>
      <Text style={{ fontSize: 22 }}>
         Subscribe
      </Text>
      <Switch
         importantForAccessibility='no-hide-descendants'
         onValueChange={() => {
            setSwitchOn(!switchOn)
            Alert.alert("Switch on : " + !switchOn)} }
        value={switchOn}
   />
</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.

• Legen Sie auf TouchableOpacity fest die accessibilityRole Komponenten switch, um Benutzern unterstützender Technologien den richtigen Kontext bereitzustellen.

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

• Fügen Sie der Komponente onPress eine Aktion über TouchableOpacity hinzu, um das Verhalten des Schalters bei Aktivierung zu handhaben.