Nom de la case à cocher

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

Impact

Les personnes utilisant TalkBack sont les plus touchées par les problèmes d’accessibilité détectés par cette règle.

Confirmation

1. Activer TalkBack
2. Tenter de mettre le focus sur le contrôle
3. L’une des situations suivantes se produira :
   • Inaccessible : TalkBack annonce uniquement la valeur et le rôle.
   • Accessible : le nom et la valeur sont lus par TalkBack.

Comment corriger

XML

Donnez un nom explicite au CheckBox contrôle en utilisant un TextView et en l'associant à votre CheckBox élément.

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

Compose

Enveloppez la case à cocher et le composant texte dans un élément avec Checkbox le rôle d'accessibilité et assurez-vous que l'action du contrôle peut être invoquée sur le composant parent.

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

Remarque : le composant de case à cocher React Native est obsolète. Cela ne s'appliquera donc que lors de l'utilisation d'un composant de case à cocher tiers ou lors de la création d'un composant personnalisé.

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

<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 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 les TouchableOpacity composants accessibilityRole à checkbox pour fournir le contexte correct aux utilisateurs de technologies d'assistance.

• Définissez la propriété CheckBox composants importantForAccessibility définie sur no-hide-descendants afin que le composant ne puisse pas être mis en évidence individuellement.

• Ajouter une action via onPress un certain moyen au TouchableOpacity composant spécifique pour gérer le comportement de la case à cocher lorsqu'elle est activée.