Modifier le nom du texte

Ce que nous vérifions

Les éléments de saisie de texte doivent avoir un nom accessible disponible pour les technologies d'assistance telles que TalkBack et Voice Access.

Exemple d'échec ❌

La saisie de texte n'a pas de nom accessible.

TalkBack lit "Edit text."

Voice Access — l'utilisateur n'a pas d'étiquette à dire pour activer le champ.

Exemple réussi ✅

La saisie de texte est associée à une étiquette visible via labelFor.

TalkBack lit "Email address, Edit text."

Voice Access — l'utilisateur dit „Adresse e-mail“ pour activer le champ.

En un coup d'œil

• Cette règle a un impact sérieux pour les utilisateurs
• Chaque champ de saisie de texte doit avoir une étiquette que les technologies d'assistance peuvent annoncer
• Le texte d'espace réservé seul n'est pas un substitut à une étiquette
• Les entrées avec icônes uniquement doivent avoir une description de contenu
• Les champs non étiquetés laissent les utilisateurs de lecteurs d'écran sans contexte pour savoir quoi taper

Impact sur les utilisateurs

Les personnes aveugles qui utilisent TalkBack pour naviguer dans votre application sont directement touchées par les problèmes trouvés par cette règle. Lorsqu'une saisie de texte n'a pas de nom accessible, TalkBack annonce seulement „Modifier le texte“ — ce qui ne donne à l'utilisateur aucune information sur ce qu'il doit taper. Cela est particulièrement déroutant dans les formulaires avec plusieurs champs.

Utilisez des étiquettes visibles et persistantes pour tous les champs de formulaire. Le texte d'espace réservé seul n'est pas un substitut à une étiquette car il disparaît lorsque l'utilisateur commence à taper.

Les éléments EditText et TextField doivent fournir les informations d'étiquette là où le système d'exploitation Android les attend afin que les technologies d'assistance puissent communiquer le but de l'élément d'entrée de manière prévisible.

Confirmer le problème de nom de texte à modifier

1. Activez TalkBack
2. Concentrez-vous sur l'élément de saisie de texte
3. L'un des éléments suivants se produira :
   • Inaccessible : TalkBack annonce seulement „Modifier le texte“ sans étiquette, ou annonce des informations dans un ordre inattendu
   • Accessible (valeur par défaut, le champ est vide) : TalkBack annonce l'étiquette du champ suivie de „Modifier le texte“ (par exemple, „Nom d'utilisateur, Modifier le texte“)
   • Accessible (l'utilisateur a entré une valeur dans le champ) : TalkBack annonce la valeur entrée par l'utilisateur + „Modifier le texte pour“ + Text de l'étiquette associée (par exemple, „'help@deque.com', Modifier le texte pour 'Adresse e-mail'“)

Corriger les problèmes

Pour résoudre les problèmes de nom de texte à modifier, associez une étiquette visible au champ de saisie. Fournissez une description de contenu lorsqu'aucune étiquette visible n'est présente ou lors de l'utilisation d'icônes.

XML

Associez une étiquette visible TextView à EditText en utilisant setLabelFor.

EditText editText = .......; // Role: EditText
TextView label = .......; // Role: Label
label.setLabelFor(editText.getId()); // Associate the label with the field

Compose

Utilisez le paramètre intégré label sur OutlinedTextField ou TextField pour fournir un nom accessible. Fournissez une description de contenu pour les entrées avec icônes uniquement.

@Composable
private fun LabeledTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        visualTransformation = VisualTransformation.None,
        label = { Text(stringResource(R.string.address_label)) }
    )
}

@Composable
private fun IconsWithDescriptionTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        label = {
            Icon(
                painter = painterResource(id = R.drawable.ic_location),
                contentDescription = stringResource(id = R.string.address_content_description)
            )
        }
    )
}

React Native

Associez l'élément texte à son champ de texte correspondant en utilisant la propriété aria-labelledby, en référant à l'nativeID de l'étiquette.

<Text
  style={{height: 70, width: 150, fontSize: 20, marginTop: 10}} 
  aria-label="Username"
  nativeID="labelUsername">
  Username
</Text>

<TextInput
  style={{height: 50, width: 200, backgroundColor: 'azure', fontSize: 20}} 
  aria-label="input"
  aria-labelledby="labelUsername"
  placeholder='John'
 />

Puis-je ignorer cette règle ?

Modifier le nom du texte a un Impact sérieux pour les utilisateurs, et nous recommandons de corriger ce problème dans presque tous les cas. Un champ de texte non étiqueté est inutilisable pour les utilisateurs de lecteurs d'écran. Dans de rares situations — comme un champ de recherche dont le but est clairement perceptible depuis le contexte environnant — vous pourriez envisager de supprimer la règle, mais cela devrait être une exception, non la norme. En savoir plus sur ignorer les règles.

Ressources

Pages de cours de l'Université Deque

• 4.1.2 Nom, Rôle, Valeur (A)
• Critère de succès 4.1.2 - Nom, Rôle, Valeur

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

Autres ressources

• Lignes directrices pour l'accessibilité du contenu Web (WCAG) 2.0, recommandation du W3C
  • Critère de succès 4.1.2 - Nom, rôle, valeur
• Documents explicatifs WCAG 2.0
  • Comprendre 4.1.2 A - Nom, rôle, valeur