Nom du Commutateur

Ce Que Nous Vérifions

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

Exemple Échoué ❌

Le commutateur n'a pas de nom accessible.

TalkBack lit "Off, Switch."

Voice Access — l'utilisateur n'a pas de libellé visible à prononcer pour activer le commutateur.

Exemple Réussi ✅

Le commutateur est étiqueté avec un texte visible via labelFor ou un groupement.

TalkBack lit "Dark Mode, Off, Switch."

Voice Access — l'utilisateur dit "Mode Sombre" pour activer le commutateur.

En Un Coup d'Œil

• Cette règle a un impact critique pour les utilisateurs
• Chaque commutateur a besoin d'un nom accessible qui décrit ce qu'il contrôle
• Un nom comme "Mode Sombre" est bien plus utile qu'aucun nom
• Le nom devrait provenir d'une étiquette visible autant que possible, en utilisant labelFor ou des techniques de groupement
• Évitez de définir une description du contenu directement sur le commutateur à moins que l'état (par exemple 'activé'/'désactivé') ne soit conservé

Impact pour les Utilisateurs

Les personnes aveugles, malvoyantes ou utilisant un accès par commutateur comptent sur le nom accessible pour comprendre ce que fait un commutateur avant d'interagir avec lui. Sans nom, TalkBack annonce seulement 'activé' ou 'désactivé' — ne donnant aux utilisateurs aucun contexte sur ce qu'ils contrôlent.

Confirmer le Problème de Nom du Commutateur

1. Activez TalkBack
2. Essayez de vous concentrer sur un élément Switch
3. L'une des situations suivantes se produira :
   • Inaccessible : TalkBack n'annonce que 'activé' ou 'désactivé'.
   • Accessible : TalkBack annonce le nom du commutateur et 'activé' ou 'désactivé'.

Corriger les Problèmes

Un commutateur a besoin d'un nom accessible pour que la technologie d'assistance puisse annoncer ce que le commutateur contrôle. La meilleure approche est de regrouper ou de lier l'étiquette et le commutateur afin qu'ils soient traités comme un seul et même élément accessible.

XML

Vous pouvez fournir un label dans l'élément voisin ou envelopper le commutateur avec son étiquette. Vous pouvez également manipuler le contentDescription, mais assurez-vous de conserver l'état 'activé' et 'désactivé' 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>

Compose

Groupez un Text et un Switch dans une disposition fusionnée telle qu'une Ligne. Appliquez le rôle de commutateur et le modificateur basculable au Text, et effacez la sémantique sur le Switch en utilisant Modifier.clearAndSetSemantics { }. De cette façon, TalkBack se concentrera sur le label, plutôt que sur l'élément du commutateur directement.

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, enveloppez les deux composants dans un composant TouchableOpacity :

<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 correctement pour tous les utilisateurs :

• Définissez accessible={true} sur le TouchableOpacity pour que le groupe soit mis en focus ensemble
• Assurez-vous que la propriété accessibilityLabel du TouchableOpacity correspond exactement au label de texte visible
• Définissez le accessibilityRole à switch pour communiquer le type de contrôle correct
• Définissez importantForAccessibility='no-hide-descendants' sur l'élément Switch afin qu'il ne puisse pas être mis en focus individuellement
• Ajoutez une action onPress pour gérer le comportement du commutateur lors de son activation

Puis-je Ignorer Cette Règle ?

Le nom du commutateur a un impact critique pour les utilisateurs. Un commutateur sans nom accessible ne peut pas être compris ni utilisé par les utilisateurs de lecteurs d'écran. Nous recommandons fortement de corriger ce problème dans tous les cas. En savoir plus sur ignorer les règles.

Ressources

Pages de Cours Deque University

• Voir Native Mobile Android sous 4.1.2 Name, Role, Value (A)

Remarque : Un abonnement est requis pour avoir un accès complet aux ressources de Deque University.

Autres ressources

• Directives pour l'accessibilité du contenu Web (WCAG) 2.0, Recommandation W3C - Critère de succès 4.1.2 - Nom, rôle, valeur
• Documents de compréhension WCAG 2.1 - Comprendre 4.1.2 A - Nom, rôle, valeur