Etiqueta en el Nombre

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

Qué Verificamos

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

Ejemplo Fallido ❌

El botón name es "Log in"

VoiceOver anuncia "Log in, botón" - no coincide con la etiqueta visible "Sign In"

Voice Control - El usuario dice "Sign In"
Esto no activará el botón porque su nombre es "Log in", no "Sign In"

Ejemplo Correcto ✅

El botón name es "Sign In"

VoiceOver anuncia "Sign In, botón" - coincide con la etiqueta visible

Voice Control - El usuario dice "Sign In"
Esto activa el botón porque el nombre coincide con la etiqueta visible

De un Vistazo

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

Impacto en los Usuarios

Las personas que usan tecnología de asistencia como VoiceOver y/o 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 VoiceOver y el contenido en la pantalla.

Si un botón tiene texto visible que dice "Sign In", VoiceOver también debería anunciar "Sign In" — no algo diferente, como "Log in".

Nota: Dependiendo del lenguaje de programación, la propiedad 'nombre' de un elemento puede llamarse de manera diferente. En Swift y React Native, por ejemplo, se llama etiqueta de accesibilidad.

Confirmar el Problema de Etiqueta en el Nombre

1. Activa VoiceOver
2. Intenta enfocar el elemento
3. Ocurrirá una de las siguientes cosas:

• Inaccesible: El texto anunciado por VoiceOver es diferente del texto visible del elemento
  • Accesible: El texto anunciado por VoiceOver es el mismo o incluye el texto visible del elemento
• Accesible: VoiceOver anunciará 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 informa explícitamente a los usuarios de AT (por ejemplo, lector de pantalla) la acción del elemento, entonces sería una buena idea expandir el nombre accesible para incluir más contexto. Por ejemplo:

• Etiqueta Visible: “Inbox, 5”, Nombre: “Inbox, 5 mensajes no leídos”
• Etiqueta Visible: “Delete”, Nombre: “Eliminar Perfil de Usuario”

UIKit

En el storyboard:

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

En el código:

Encuentra dónde se estableció la etiqueta de accesibilidad y asegúrate de que el valor de la etiqueta de accesibilidad coincida o contenga todo el texto visible del elemento.

button.title = "Search"
button.accessibilityLabel = "Search the store"
// Not an exact match, but the accessibilityLabel includes all the visible text

SwiftUI

Establezca una etiqueta de accesibilidad que coincida o contenga el texto visible.

Button(action: {
    openMenu()
}) {
    Text("Sign in")
}.accessibility(label: Text("Sign in"))
// The visible text and accessibility label match exactly

React Native

La propiedad accessibilityLabel debe coincidir o contener el texto visible.

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

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Para elementos interactivos sin un título, utilice una vista touchable que contenga los componentes de control y texto. De esta manera, el elemento de texto se convierte en la etiqueta visible para el control. Establezca 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' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

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

¿Puedo ignorar esta regla?

Label In Name tiene un impacto serio 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” podrías querer que el texto anunciado por VoiceOver diga “Visa Card terminando en 1-2-3-4”. Dado que el texto en el botón no coincide con el nombre anunciado por VoiceOver, esto causaría una falla en Label in Name. Pero en un caso como este, tendría sentido ignorar la regla. Aprende más sobre ignorar reglas.

Recursos

Páginas de curso 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
  • Comprensión 2.5.3 A - Label in Name