Nom du commutateur

Tout élément Switch doit avoir un nom accessible disponible pour les technologies d'assistance telles que TalkBack et Voice Access.

Impact

Un switch doit avoir un nom qui fournit le contexte et l’anticipation de ce qui se passe lorsqu’il est allumé ou éteint, en particulier pour les personnes malvoyantes ou aveugles.

Confirmation

1. Activer TalkBack
2. Essayez de vous concentrer sur un Switch contrôle
3. L'une des situations suivantes se produira :
   • Inaccessible : TalkBack annonce uniquement « on » ou « off ».
   • Accessible : TalkBack annonce le nom du switch et « on » ou « off ».

Comment corriger

XML

Vous pouvez fournir une étiquette dans l'élément voisin ou envelopper l'interrupteur avec son étiquette. Vous pouvez également manipuler le contentDescription, mais assurez-vous de conserver l'état « on » et « off » pour les annonces TalkBack.

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>

Composer

Dans l'exemple ci-dessous, regroupez le Text et le Switch dans une mise en page Compose fusionnée comme un Row. Ajoutez un rôle de commutateur et un modificateur commutable au texte, puis effacez la sémantique du commutateur en utilisant Modifier.clearAndSetSemantics { } et Talkback se concentrera sur l'étiquette mais pas sur le commutateur.

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

Pour combiner un commutateur et une étiquette dans React Native, vous pouvez encapsuler les deux composants dans un TouchableOpacity composant :

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

Pour garantir que cela fonctionne bien et fournisse tout le contexte nécessaire aux utilisateurs de technologies d'assistance et aux utilisateurs de technologies non assistées :

• Assurez-vous que TouchableOpacity la propriété vue est définie sur accessible true, afin que le groupe soit concentré ensemble pour les utilisateurs de technologies d'assistance.

• Assurez-vous que accessibilityLabel la propriété du TouchableOpacity composant est définie sur la même valeur exacte que l'étiquette de texte.

• Définissez le TouchableOpacity composant sur accessibilityRole pour fournir le contexte correct aux utilisateurs de technologies d'assistance. switch

• Définissez la propriété du Switch composant sur importantForAccessibility afin que le composant ne puisse pas être focalisé individuellement. no-hide-descendants

• Ajoutez une action via [insert glossary term] onPress au [insert glossary term] TouchableOpacity composant pour gérer le comportement du commutateur lorsqu'il est activé.