Nombre del campo de texto Edit Text

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 Impacto - Grave

Los elementos de entrada de texto deben tener un nombre accesible disponible para tecnologías de asistencia como TalkBack y Voice Access.

Impacto

Los problemas detectados por esta regla afectan a las personas con ceguera.

EditText o TextField los elementos deben proporcionar información donde el sistema operativo Android lo espera. Como resultado, las tecnologías de asistencia pueden comunicar información de manera predecible.

Confirmación

  1. Activar TalkBack
  2. Enfócate en el elemento
  3. Ocurrirá uno de los siguientes casos:
    • Accesible: TalkBack anuncia el texto ingresado y las etiquetas asociadas Text.
    • Inaccesible: TalkBack no leyó la información anterior o se anunció en el orden incorrecto.

Cómo solucionarlo

Agregue etiquetas adecuadas al campo de texto. Utilice íconos solo cuando haya una descripción del contenido 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

Asocie el elemento de texto con su campo de texto correspondiente utilizando la propiedad 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'
 />