Etiqueta al Frente
¡Aprende cómo estamos utilizando inteligencia artificial para esta regla!
Qué Verificamos
Si un elemento interactivo tiene una etiqueta visible, esta debe aparecer al principio del nombre anunciado por la tecnología asistiva (TA), antes de cualquier información adicional.
Ejemplo Fallido ❌
El botón name es "Iniciar sesión en cuenta"
TalkBack anuncia "Iniciar sesión en cuenta, botón" — la etiqueta visible "Iniciar sesión" no está al frente
Voice Access - El usuario dice "Iniciar sesión"
Es posible que esto no active el botón ya que el nombre comienza con "Cuenta", no con "Iniciar sesión"
Ejemplo Exitoso ✅
El botón name es "Iniciar sesión en la cuenta"
TalkBack anuncia "Iniciar sesión en la cuenta, botón" - la etiqueta visible "Iniciar sesión" viene primero
Voice Access - El usuario dice "Iniciar sesión"
Esto activa el botón porque el nombre comienza con la etiqueta visible
En Resumen
- Esta regla tiene un impacto menor para los usuarios, aplicando una Mejor Práctica de WCAG
- Texto visible primero: Siempre comienza el nombre de un elemento con exactamente lo que los usuarios videntes perciben en la pantalla
- Contexto después: Agrega información útil al nombre del elemento después del texto visible
Impacto en los Usuarios
Las personas que usan tecnología asistiva necesitan entender rápidamente qué hace un elemento y poder interactuar fácilmente con él. Cuando las palabras adicionales aparecen antes del nombre accesible, esto ralentiza la navegación y hace que tu aplicación sea menos eficiente para los usuarios de TA.
- TalkBack - Algunos usuarios cambian entre modalidades — utilizando tanto un lector de pantalla como entrada de voz. La consistencia al colocar el texto visible al inicio del nombre reduce la confusión al comparar lo que un usuario vidente puede percibir frente a lo que es anunciado por TalkBack.
- Acceso por Voz - Los motores de reconocimiento de voz a menudo dependen del comienzo de un nombre accesible para resolver qué elemento está apuntando el usuario. Colocar la etiqueta visible al inicio del nombre accesible hace la coincidencia inequívoca y reduce la posibilidad de que un usuario no pueda activar un elemento. Una práctica recomendada que recomendamos es tener sólo el texto visible de un elemento dentro del nombre, y poner la información secundaria dentro del valor accesible, pista, o rol.
Nota: Dependiendo del lenguaje de programación, la propiedad 'name' para un elemento puede llamarse de manera diferente. Para XML o Compose, se llama descripción de contenido. Para React Native, se llama etiqueta de accesibilidad.
Confirmar el Problema de Etiqueta al Frente
- Activa TalkBack
- Enfoca el elemento
- Una de las siguientes cosas ocurrirá:
- Inaccesible: El texto primero anunciado por TalkBack es diferente del texto visible del elemento
- Accesible: TalkBack anunciará primero el texto visible del elemento
Solucionar Problemas
Para resolver problemas de Etiqueta al Frente, iguala el contenido del texto y el nombre accesible exactamente cuando sea posible. Evita el uso de palabras superfluas como "Haga clic aquí para..." o "Toca para...", y nombra el elemento de manera que le diga explícitamente al usuario su acción.
A veces es necesario ampliar el nombre accesible de un elemento para incluir más contexto. Por ejemplo:
- Etiqueta Visible: “Bandeja de entrada, 5”, Nombre: “Bandeja de entrada, 5 mensajes no leídos”
- Etiqueta Visible: “Eliminar”, Nombre: “Eliminar perfil de usuario”
Para evitar problemas de Etiqueta al Frente en casos como estos, asegúrate de que el texto visible del elemento venga primero en su nombre accesible.
XML
Para un botón con texto visible que dice "Enviar":
<Button
android:id="@+id/email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/xlg"
android:text="Send"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider2" />El texto visible del botón viene primero en su descripción de contenido, y la información adicional sigue.
val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"Compose
Para un elemento de texto clickeable con texto visible que dice "Enviar", el texto visible para el botón viene primero en su contentDescription, y la información adicional sigue.
Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")React Native
La propiedad accessibilityLabel debe comenzar con el texto visible del elemento.
Por defecto, un botón usará su título como su accessibilityLabel, y por lo tanto, cumplirá con esta regla.
<Button
title={'Menu'}
mode='contained'
accessibilityLabel='Menu'
/>Si decides personalizar el accessibilityLabel para un botón, asegúrate de que comience con el texto del title.
<Button
title={'Log In'}
mode='contained'
accessibilityLabel='Log In to Transfer Money'
/>Cuando configures el accessibilityLabel explícitamente, asegúrate de que el accessibilityLabel comience con el texto visible del elemento.
<View style={styles.container}>
<Button title='Menu' accessibilityLabel='Menu: Tap to expand/collapse'>
</View>¿Puedo ignorar esta regla?
La regla de Etiqueta al Frente impone una mejor práctica señalada por WCAG como parte de WCAG 2.1 2.5.3 A. Esta regla tiene un impacto menor y se puede ignorar si se desea priorizar problemas más serios. Puede desactivar reglas categorizadas como 'Mejores Prácticas' desde el Panel de Control Móvil, o ignorar la regla en pruebas escritas para Android.
Preguntas Frecuentes
¿Existen limitaciones conocidas con esta regla?
Sí. Puede ocurrir un fallo de regla cuando el texto visible de un elemento interactivo contiene una abreviatura (por ejemplo, „GB“, „km“) o un identificador oscurecido o truncado, y el anuncio de accesibilidad consiste en las palabras representadas (por ejemplo, „gigabytes“, „kilómetros“), aunque este es el patrón recomendado para hacer que el contenido abreviado o truncado sea accesible para lectores de pantalla.
Recursos
- Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1, Recomendación del W3C
- Documentos de Comprensión de WCAG 2.1