Valeur du champ de texte modifiable

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.0 - 4.1.2 A Impact – Critique

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

warning

ContentDescriptions on EditText views peut remplacer la valeur sur certaines versions d'Android.

Impact

Les problèmes détectés par cette règle affectent les personnes aveugles.

EditText les éléments doivent fournir des informations là où le système d'exploitation Android l'attend. Par conséquent, les technologies d’assistance peuvent communiquer des informations de manière prévisible.

Confirmation

  1. Activer TalkBack
  2. Focalisez-vous sur l'élément
  3. L’une des situations suivantes se produira :
    • Accessible : TalkBack annonce le texte saisi, pour et l'étiquette associée Text.
    • Inaccessible : TalkBack n'a pas annoncé les informations ci-dessus ou les a annoncées dans le mauvais ordre.

Comment corriger

Assurez-vous qu'une étiquette est correctement associée à un élément EditText ou TextField afin que le nom et la valeur soient disponibles pour les technologies d'assistance.

XML

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

Compose

@Composable
fun ZipCodeInput() {
    OutlinedTextField(
        modifier = Modifier.semantics {
            this.contentDescription = “Enter your Zip Code”
        },
        label = “Zip Code”
    )
}

React Native

Évitez de définir la propriété accessibilityLabel à la valeur de l'entrée. Lorsque vous donnez l'exemple, vous pouvez ajouter la valeur à la propriété placeholder .

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