Etiqueta en el Nombre

¡Aprende cómo usamos la inteligencia artificial para esta regla!

Qué Verificamos

Si un elemento interactivo tiene una etiqueta visible, el nombre anunciado por la tecnología de asistencia (TA) debe ser el mismo.

Ejemplo de Fallo ❌

El botón name es "Iniciar sesión"

TalkBack anuncia "Iniciar sesión, botón", lo cual no coincide con la etiqueta visible "Acceder"

Voice Access - El usuario dice "Acceder"
Esto no activará el botón porque su nombre es "Iniciar sesión", no "Acceder"

Ejemplo de Éxito ✅

El botón name es "Acceder"

TalkBack anuncia "Acceder, botón", coincidiendo con la etiqueta visible

Voice Access - El usuario dice "Acceder"
Esto activa el botón porque el nombre coincide con la etiqueta visible

A Simple Vista

• Esta regla tiene un impacto serio para los usuarios
• Coincide con el texto visible: Si los usuarios videntes pueden ver un botón "Acceder", asegúrate de que los lectores de pantalla también anuncien "Acceder"
• Está bien agregar contexto adicional: "Guardar" puede convertirse en "Guardar documento"
• Nunca omitas palabras visibles: Los lectores de pantalla deben anunciar un botón "Buscar en el catálogo", no solo "Buscar"

Impacto para los Usuarios

Las personas que utilizan tecnología de asistencia como TalkBack y/o que experimentan baja visión son las más afectadas por los problemas detectados. Los problemas de Etiqueta en el Nombre pueden contribuir a una experiencia confusa o conflictiva entre el anuncio de TalkBack y el contenido en la pantalla.

Si un botón tiene el texto visible que dice "Acceder", TalkBack también debería anunciar "Acceder" — no algo diferente, como "Iniciar sesión".

Nota: Dependiendo del lenguaje de programación, la propiedad 'nombre' 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 Problema de Etiqueta en el Nombre

1. Activa TalkBack
2. Intenta enfocar el elemento
3. Ocurrirá una de las siguientes cosas:
   • Inaccesible: El texto anunciado por TalkBack es diferente del texto visible del elemento
   • Accesible: El texto anunciado por TalkBack es el mismo o incluye el texto visible del elemento

Corregir Problemas

Para resolver problemas de Etiqueta en el Nombre, establece un nombre para el elemento que coincida o contenga el texto visible del elemento.

Cuando el texto visible es descriptivo y único, se recomienda que el nombre coincida exactamente con el texto.

Cuando el texto visible por sí solo no indica explícitamente a los usuarios de TA (por ejemplo, un lector de pantalla) la acción del elemento, entonces sería una buena idea ampliar el nombre accesible para incluir más contexto. Por ejemplo:

• Etiqueta Visible: “Buzón de entrada, 5”, Nombre: “Buzón de entrada, 5 mensajes no leídos”
• Etiqueta Visible: “Eliminar”, Nombre: “Eliminar perfil de usuario”

XML

Establece una descripción del contenido que coincida exactamente o contenga el texto visible. Si el elemento es un Button o un TextView clicable:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");
// Not an exact match, but the accessibilityLabel includes all the visible text

Si el elemento es un CheckBox, por favor consulta Nombre de CheckBox.

Compose

Asegúrate de que el contentDescription del elemento coincida exactamente o contenga el texto visible.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Send”
        )
    }
}

React Native

La propiedad accessibilityLabel debe coincidir o contener el texto visible del elemento.

Por defecto, un botón usará su título como su accessibilityLabel, y por lo tanto pasará esta regla.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>
// The visible text and accessibility label match exactly

Para elementos interactivos sin título, utiliza una vista tocable que contenga el elemento y los componentes de texto. De esta manera, el texto provisto se convierte en la etiqueta visible para el elemento. Establece el accessibilityLabel del elemento contenedor para que coincida o contenga el texto visible.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Subscribe to notifications'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>

¿Puedo ignorar esta regla?

Label In Name tiene un Impacto grave para los usuarios, y recomendamos tomar medidas para remediar este problema excepto en casos raros. Por ejemplo, si tienes un botón con texto visible que dice "Visa Card xxxx-xxxx-xxxx-1234" puedes querer establecer que el texto anunciado por TalkBack diga "Visa Card terminada en 1-2-3-4". Dado que el texto en el botón no coincide con el nombre anunciado por TalkBack, esto causaría un fallo para Label in Name. Pero en un caso como este, tendría sentido ignorar la regla. Aprende más sobre ignorando reglas.

Recursos

Páginas de Cursos de Deque University

• 2.5.3 Label in Name (A)
• Criterio de Éxito 2.5.3 - Label in Name
• Requisitos - 2.5.3.a Label in Name

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.1, Recomendación del W3C
  • Criterio de Éxito 2.5.3 - Label in Name
• Documentos de Comprensión de WCAG 2.1
  • Comprendiendo 2.5.3 A - Label in Name