Editar Nombre del Texto

Qué Revisamos

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

Ejemplo Fallido ❌

La entrada de texto no tiene un nombre accesible.

TalkBack lee "Edit text."

Voice Access — el usuario no tiene una etiqueta que decir para activar el campo.

Ejemplo Correcto ✅

La entrada de texto está asociada con una etiqueta visible a través de labelFor.

TalkBack lee "Email address, Edit text."

Voice Access — el usuario dice "Dirección de correo electrónico" para activar el campo.

De un Vistazo

• Esta regla tiene un impacto serio para los usuarios
• Cada campo de entrada de texto debe tener una etiqueta que las tecnologías de asistencia puedan anunciar
• El texto del marcador de posición no es un sustituto de una etiqueta
• Las entradas solo con icono deben tener una descripción de contenido
• Los campos sin etiquetar dejan a los usuarios de lectores de pantalla sin contexto acerca de qué escribir

Impacto para los Usuarios

Las personas que son ciegas y usan TalkBack para navegar por su aplicación se ven directamente afectadas por los problemas encontrados por esta regla. Cuando una entrada de texto no tiene un nombre accesible, TalkBack anuncia solo "Editar texto" — sin brindar al usuario información sobre qué deben escribir. Esto es especialmente desorientador en formularios con múltiples campos.

Use etiquetas visibles y persistentes para todos los campos del formulario. El texto del marcador de posición no es un sustituto de una etiqueta porque desaparece cuando el usuario comienza a escribir.

Los elementos EditText y TextField deben proporcionar información de la etiqueta donde el sistema operativo Android lo espera para que las tecnologías de asistencia puedan comunicar el propósito del elemento de entrada de manera predecible.

Confirmar Problema del Nombre del Texto de Edición

1. Encienda TalkBack
2. Enfóquese en el elemento de entrada de texto
3. Ocurrirá una de las siguientes:
   • Inaccesible: TalkBack anuncia solo "Editar texto" sin etiqueta, o anuncia información en un orden inesperado
   • Accesible (valor predeterminado, el campo está vacío): TalkBack anuncia la etiqueta del campo seguido de "Editar texto" (por ejemplo, "Nombre de usuario, Editar texto")
   • Accesible (el usuario ha ingresado un valor en el campo): TalkBack anuncia el valor ingresado por el usuario + "Editar texto para" + Text de la etiqueta asociada (por ejemplo, "'help@deque.com', Editar texto para 'Dirección de correo electrónico'")

Corregir Problemas

Para resolver problemas de Nombre del Texto de Edición, asocie una etiqueta visible con el campo de entrada. Proporcione una descripción de contenido cuando no haya una etiqueta visible presente, o al usar iconos.

XML

Asocie una etiqueta TextView visible con el EditText usando setLabelFor.

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

Compose

Use el parámetro label incorporado en OutlinedTextField o TextField para proporcionar un nombre accesible. Suministre una descripción de contenido para entradas solo con icono.

@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 usando la propiedad aria-labelledby, haciendo referencia al nativeID de la etiqueta.

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

¿Puedo Ignorar Esta Regla?

Editar Nombre de Texto tiene un Impacto serio para los usuarios, y recomendamos remediar este problema en casi todos los casos. Un campo de texto sin etiquetar es inutilizable para los usuarios de lectores de pantalla. En situaciones raras — como un campo de búsqueda cuyo propósito es inconfundiblemente claro por el contexto circundante — podría considerar suprimir la regla, pero esto debería ser una excepción, no la norma. Aprenda más sobre ignorando reglas.

Recursos

Páginas del Curso de Deque University

• 4.1.2 Nombre, Rol, Valor (A)
• Criterio de Éxito 4.1.2 - Nombre, Rol, Valor

Nota: El acceso completo a los recursos de Deque University requiere una suscripción.

Otros recursos

• Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0, Recomendación del W3C
  • Criterio de Éxito 4.1.2 - Nombre, Función, Valor
• Documentos de Comprensión de WCAG 2.0
  • Comprensión 4.1.2 A - Nombre, Función, Valor