Nom 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 – Grave

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

Impact

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

EditText ou TextField é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 et les étiquettes associées Text.
    • Inaccessible : TalkBack n'a pas lu les informations ci-dessus, ou elles ont été annoncées dans le mauvais ordre.

Comment corriger

Ajoutez des étiquettes appropriées au champ de texte. Utilisez des icônes uniquement lorsqu'une description de contenu est disponible.

XML

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

Compose

@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 de texte à son champ de texte correspondant en utilisant la propriété aria-labelledBy :

<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'
 />