Nom de la case à cocher

Ce que nous vérifions

Tout élément de type CheckBox doit avoir un nom accessible pour des technologies d'assistance telles que TalkBack et Voice Access.

Exemple d'échec ❌

name = {none}

TalkBack annonce uniquement la valeur et le rôle
« Coché, Case à cocher »

Voice Access - L'utilisateur dit « S'abonner à la newsletter »
Cela n'activera pas la case à cocher car elle n'a pas de nom

Exemple de réussite ✅

name = « S'abonner à la newsletter »

TalkBack annonce the name, value, and role
« S'abonner à la newsletter, Coché, Case à cocher »

Voice Access - L'utilisateur dit « S'abonner à la newsletter »
Cela active la case à cocher parce que le nom correspond

À Aperçu

• Cette règle a un impact sérieux pour les utilisateurs
• Chaque case à cocher a besoin d'un nom : les utilisateurs s'appuyant sur TalkBack ou Voice Access doivent pouvoir identifier et interagir avec les cases à cocher
• Associez une étiquette visible : utilisez un TextView (XML) ou un composant Text (Compose) lié à la case à cocher
• Évitez d'utiliser les propriétés Text et ContentDescription ensemble — elles entrent en conflit

Impact sur les utilisateurs

Les personnes utilisant des technologies d'assistance telles que TalkBack et/ou Voice Access sont le plus affectées par les problèmes détectés par cette règle.

Lorsqu'un CheckBox n'a pas de nom accessible, TalkBack annonce uniquement sa valeur et son rôle — par exemple, « Coché, Case à cocher » — laissant l'utilisateur sans contexte sur ce qu'il sélectionne. Cela rend impossible la compréhension de l'objectif du contrôle sans exploration supplémentaire, et empêche les utilisateurs de Voice Access d'activer la case à cocher en prononçant son étiquette.

Confirmer le problème de nom de la case à cocher

1. Activez TalkBack
2. Essayez de concentrer le contrôle
3. L'une des choses suivantes se produira :
   • Inaccessible : TalkBack annonce uniquement la valeur et le rôle.
   • Accessible : TalkBack lit à la fois le nom et la valeur.

Corriger les problèmes

Pour résoudre un problème de nom de case à cocher, assurez-vous que chaque case à cocher a un nom accessible en l'associant à une étiquette de texte visible. De cette manière, TalkBack annoncera un nom significatif ainsi que la valeur et le rôle de la case à cocher. Les utilisateurs de Voice Access pourront activer la case à cocher en prononçant son étiquette.

XML

Associez un TextView au CheckBox en utilisant l'attribut labelFor. Cela lie l'étiquette visible à la case à cocher afin que TalkBack annonce le texte de l'étiquette en tant que nom accessible de la case à cocher.

  <LinearLayout
      android:layout_width="wrap_content"                                       
      android:layout_height="wrap_content"
      android:orientation="horizontal">                                         
                                                                              
      <CheckBox                                                               
          android:id="@+id/subscribe_checkbox"
          android:layout_width="wrap_content"                                   
          android:layout_height="wrap_content" />
                                                                                
      <TextView                                                               
          android:layout_width="wrap_content"                                 
          android:layout_height="wrap_content"
          android:text="Subscribe to newsletter"                                
          android:labelFor="@id/subscribe_checkbox" />
                                                                                
  </LinearLayout>  

Si les vues sont créées par programmation, ou si l'association ne peut pas être faite en XML, utilisez setLabelFor pour lier l'étiquette à la case à cocher dans le code.

TextView label = findViewById(R.id.checkbox_label);
CheckBox checkBox = findViewById(R.id.subscribe_checkbox);
label.setLabelFor(checkBox.getId());

Compose

Enveloppez la case à cocher et un élément de texte à l'intérieur d'un élément parent avec le rôle d'accessibilité Checkbox, et assurez-vous que l'action de la case à cocher peut être invoquée en sélectionnant l'élément parent.

Row(modifier = Modifier
    .toggleable(
        value = checkedState,
        enabled = true,
        role = Role.Checkbox, // Parent element has the accessibility role
        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

Remarque : Le composant de case à cocher React Native a été déprécié, donc cela s'appliquera uniquement lors de l'utilisation d'un élément de case à cocher tiers, ou lors de la création d'un élément personnalisé.

Pour combiner une case à cocher et une étiquette dans React Native, vous pouvez envelopper les deux éléments dans un 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>

Pour garantir que cela fonctionne correctement pour tous les utilisateurs :

• Définissez accessible={true} sur le TouchableOpacity pour que la technologie d'assistance se concentre sur le groupe comme un seul élément
• Définissez accessibilityLabel pour qu'il corresponde exactement à l'étiquette de texte visible
• Définissez accessibilityRole sur checkbox pour fournir le contexte correct aux utilisateurs de technologies d'assistance
• Définissez importantForAccessibility='no-hide-descendants' sur le CheckBox pour qu'il ne puisse pas être individuellement mis au point
• Ajoutez une action onPress au TouchableOpacity pour gérer le basculement de la case à cocher

Puis-je ignorer cette règle ?

Nom de la case à cocher a un impact sérieux pour les utilisateurs, et nous recommandons de résoudre ce problème dans presque tous les cas. Une case à cocher sans nom accessible ne fournit aucun contexte aux utilisateurs de technologies d'assistance et empêche complètement l'interaction avec Voice Access. En savoir plus sur ignorer les règles.

Ressources

Pages de cours de Deque University

• Voir Mobile Natif Android sous 4.1.2 Nom, Rôle, Valeur (A)

  Remarque : L'accès complet aux ressources de Deque University nécessite un abonnement.

Autres ressources

• Règles pour l'accessibilité des contenus Web (WCAG) 2.1, Recommandation du W3C
  • Critère de réussite 4.1.2 – Nom, Rôle, Valeur (A)
  • Comprendre 4.1.2 – Nom, Rôle, Valeur