Modifier la valeur du texte

Ce que nous vérifions

Lorsque l'utilisateur saisit dans un champ de texte, la valeur entrée doit être exposée de manière programmable pour les technologies d'assistance comme TalkBack et Voice Access.

Exemple Échoué ❌

value = "Champ e-mail"

TalkBack annonce le `contentDescription` au lieu du texte saisi
"Champ e-mail, zone de saisie"

L'utilisateur ne peut pas confirmer, revoir ou corriger ce qu'il a tapé

Exemple Réussi ✅

value = "jsmith@emaik.com" (le texte saisi)

TalkBack annonce l'étiquette et la valeur saisie
"E-mail, jsmith@emaik.com, zone de saisie"

L'utilisateur peut confirmer et corriger ce qu'il a tapé

En un coup d'œil

• Cette règle a un impact critique pour les utilisateurs
• Les utilisateurs ont besoin d'entendre ce qu'ils ont tapé pour confirmer et corriger leur saisie
• Les éléments EditText doivent exposer leur valeur actuelle aux technologies d'assistance, et pas seulement leur étiquette
• Ne configurez pas un contentDescription sur un élément EditText ; cela remplace la valeur saisie et perturbe les annonces de TalkBack
• Associez une étiquette au champ en utilisant setLabelFor() pour que le nom du champ et la valeur soient disponibles

Impact pour les utilisateurs

Les personnes qui dépendent de TalkBack sont les plus touchées par ce problème. Lorsqu'une saisie texte n'expose pas sa valeur, les utilisateurs ne peuvent pas entendre ce qu'ils ont tapé. Cela rend impossible la confirmation, la révision ou la correction des entrées de formulaire — telles que les noms d'utilisateur, mots de passe ou adresses — sans assistance visuelle.

Les éléments EditText doivent fournir de manière cohérente leur valeur actuelle. Lorsque la valeur est correctement exposée, les technologies d'assistance peuvent communiquer la saisie de manière prévisible.

Confirmer le problème de la valeur de texte modifiée

1. Activez TalkBack
2. Focalisez-vous sur l'élément de saisie texte
3. Tapez du texte dans le champ
4. L'une des situations suivantes se produira :
   • Accessible : TalkBack annonce le texte entré avec l'étiquette associée
   • Inaccessible : TalkBack annonce une description de contenu au lieu de la valeur saisie, ou n'annonce pas du tout la valeur

Corriger les problèmes

La cause la plus fréquente d'échec pour Modifier la valeur de texte est la configuration d'un contentDescription directement sur un EditText, ce qui remplace la valeur que TalkBack lirait autrement. Retirez tout contentDescription de l'élément d'entrée lui-même, et associez plutôt une étiquette visible pour que le nom du champ et la valeur saisie soient disponibles pour les lecteurs d'écran.

XML

Associez une étiquette TextView avec le EditText en utilisant setLabelFor(). Ne mettez pas un contentDescription sur le EditText lui-même, car cela empêchera TalkBack de lire la valeur saisie.

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

Compose

Utilisez le paramètre label sur OutlinedTextField pour associer une étiquette visible à l'entrée. Ne configurez pas contentDescription sur le TextField lui-même, car cela remplace la valeur saisie.

@Composable
fun ZipCodeInput() {
    OutlinedTextField(
        value = zipCode,
        onValueChange = { zipCode = it },
        label = { Text("Zip Code") }
    )
}

React Native

Évitez de définir la propriété accessibilityLabel à la valeur actuelle de l'entrée. Définissez-la pour décrire le champ à la place, et utilisez la propriété placeholder pour des valeurs d'exemple. Cela garantit que l'étiquette du champ et la valeur saisie restent séparées et sont toutes deux accessibles.

<TextInput 
   accessibilityLabel='Username'
   accessible={true}
   placeholder='John'
   style={{height: 45, width: 200, backgroundColor: 'azure', fontSize: 20, margin:20}}
 /> 

Puis-je ignorer cette règle ?

Modifier la valeur de texte a un impact critique pour les utilisateurs, et nous recommandons fortement de remédier à tous les problèmes trouvés par cette règle. Les utilisateurs qui dépendent de TalkBack ne peuvent pas confirmer ou corriger ce qu'ils ont tapé si la valeur n'est pas exposée - ce qui rend l'achèvement du formulaire inaccessible. 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 : L'accès complet aux ressources de l'Université Deque nécessite un abonnement.

Autres ressources

• Règles pour l'accessibilité des contenus Web (WCAG) 2.0, recommandation du W3C
  • Critère de succès 4.1.2 - Nom, Rôle, Valeur
• Comprendre les WCAG 2.0
  • Comprendre 4.1.2 A - Nom, Rôle, Valeur