Etiqueta al Frente

¡Aprende cómo estamos utilizando inteligencia artificial para esta regla!

Qué Verificamos

Si un elemento interactivo tiene una etiqueta visible, esta debería estar al comienzo del nombre anunciado por la tecnología de asistencia (AT), antes de cualquier información adicional.

Ejemplo Erróneo ❌

El botón name es "Inicio de sesión en cuenta"

VoiceOver anuncia "Inicio de sesión en cuenta, botón" - la etiqueta visible "Iniciar Sesión" no está al frente

Voice Control - El usuario dice "Iniciar Sesión"
Esto puede no activar el botón ya que el nombre comienza con "Cuenta", no "Iniciar Sesión"

Ejemplo Correcto ✅

El botón name es "Iniciar sesión en la cuenta"

VoiceOver anuncia "Iniciar sesión en la cuenta, botón" - la etiqueta visible "Iniciar Sesión" aparece primero

Voice Control - El usuario dice "Iniciar Sesión"
Esto activa el botón porque el nombre comienza con la etiqueta visible

A Simple Vista

• Esta regla tiene un impacto menor para los usuarios, asegurando una Buena Práctica WCAG
• Texto visible primero: Siempre comienza el nombre de un elemento con exactamente lo que los usuarios videntes perciben en la pantalla
• Contexto en segundo lugar: Agrega información útil al nombre del elemento después del texto visible

Impacto para los Usuarios

Las personas que utilizan tecnología de asistencia necesitan comprender rápidamente lo que hace un elemento y poder interactuar fácilmente con él. Cuando las palabras adicionales vienen antes del nombre accesible, esto ralentiza la navegación y hace que tu aplicación sea menos eficiente para los usuarios de AT.

• VoiceOver - Algunos usuarios alternan 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 VoiceOver.
• Control por Voz - Los motores de reconocimiento de voz a menudo dependen del comienzo de un nombre accesible para resolver qué elemento el usuario está apuntando. Colocar la etiqueta visible al inicio del nombre accesible hace que la coincidencia sea inequívoca y reduce la posibilidad de que un usuario no pueda activar un elemento. Una buena práctica que recomendamos es solo tener 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 'nombre' para un elemento puede llamarse algo diferente. En Swift y React Native, por ejemplo, se llama etiqueta de accesibilidad.

Confirmar Problema de Etiqueta al Frente

1. Enciende VoiceOver
2. Foca el elemento
3. Ocurrirá una de las siguientes cosas:
   • Inaccesible: El texto primero anunciado por VoiceOver es diferente del texto visible del elemento
   • Accesible: VoiceOver anunciará primero el texto visible del elemento

Corregir Problemas

Para resolver problemas de Etiqueta al Frente, iguala el contenido de texto y nombre accesible exactamente cuando sea posible. Evita el uso de palabras innecesarias como "Haga clic aquí para..." o "Toque para...", y nombra el elemento de una manera que diga explícitamente al usuario su acción.

A veces es necesario expandir 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 aparezca primero en su nombre accesible.

UIKit

En el guion gráfico:

1. Selecciona el elemento con un problema LabelAtFront
2. Asegúrate de que el Panel de Inspectores esté visible
3. Selecciona el Inspector de Identidad.
4. Bajo Accesibilidad, hay una categoría llamada "Etiqueta". Ingresa una etiqueta que coincida exactamente o comience con el texto visible.

En código:

Encuentra dónde se ha establecido la etiqueta de accesibilidad, y verifica que el valor de accessibilityLabel coincida o comience con todo el texto visible del elemento.

button.title = "Send"
button.accessibilityLabel = "Send email"

SwiftUI

Asegúrate de establecer una etiqueta de accesibilidad que coincida o comience con todo el texto visible del elemento.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}

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={'Delete'}
   mode='contained'
   accessibilityLabel='Delete'
/>

Si decides personalizar la accessibilityLabel de un botón, asegúrate de que comience con el texto de la title.

<Button 
   title={'Log In'}
   mode='contained'
   accessibilityLabel='Log In to Transfer Money'
/>

Para otros elementos sin un título explícito, o al establecer la accessibilityLabel explícitamente, asegúrate de que la accessibilityLabel comience con el texto visible del elemento.

<View style={styles.container}>
   <Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>

¿Puedo ignorar esta regla?

La regla de Etiqueta al Frente aplica una buena práctica señalada por WCAG como parte de WCAG 2.1 2.5.3 A. Esta regla tiene un impacto menor y puede ser ignorada si deseas priorizar problemas más serios. Puedes desactivar reglas categorizadas como 'Buena práctica' desde el Tablero Móvil, o mediante ignorar la regla en pruebas escritas para iOS.

Recursos

• Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1, Recomendación del W3C
  • Criterio de Éxito 2.5.3 - Etiqueta en el Nombre
• Documentos de Comprensión WCAG 2.1
  • Comprensión del CE 2.5.3: Etiqueta en el Nombre