Nombre del campo de texto Edit Text
Not for use with personal data
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
- Activar TalkBack
- Enfócate en el elemento
- 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.
- Accesible: TalkBack anuncia el texto ingresado y las etiquetas asociadas
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'
/>