Nombre de Vista Activa

Qué Verificamos

Un elemento interactivo debe tener un nombre accesible disponible para tecnologías de asistencia como TalkBack y Voice Access.

Ejemplo Fallido ❌

No se ha asignado un nombre al elemento interactivo

TalkBack lee "Button"

Voice Access — el usuario dice "Buscar"
El elemento no responde ya que no tiene nombre

Ejemplo Correcto ✅

`contentDescription="Search"`

TalkBack lee "Search, button"

Voice Access — el usuario dice "Buscar"
El elemento se activa porque su nombre coincide

De un Vistazo

• Esta regla tiene un impacto crítico para los usuarios
• Cada elemento interactivo necesita un nombre: botones, enlaces, controles personalizados, etc. requieren un nombre accesible que TalkBack pueda anunciar
• Si un elemento interactivo no tiene texto visible, proporcione uno explícitamente usando propiedades contentDescription o accessibilityLabel
• No deje a TalkBack sin nada que decir: un elemento que solo anuncia su rol o valor —sin nombre— no proporciona contexto a los usuarios sobre lo que hace

Impacto para los Usuarios

Las personas que utilizan TalkBack son las más afectadas. Un elemento interactivo sin nombre no transmitirá el contexto completo o el propósito a la persona que interactúa con él.

Cuando un elemento interactivo —como un botón, un botón de imagen o un control personalizado— no tiene un nombre accesible, TalkBack no tiene nada que anunciar cuando este elemento está enfocado. Por ejemplo, puede que tenga un botón con una imagen de una flecha subrayada que indica que el usuario puede descargar. Sin un nombre accesible, TalkBack solo anunciará "Botón, doble toque para activar."

Esta regla también tiene un impacto para las personas que utilizan Voice Access. Los usuarios de Voice Access que intenten activar el elemento diciendo su etiqueta visible descubrirán que no responde.

Confirmar Problema de Nombre de Vista Activa

1. Encienda TalkBack
2. Enfoque el elemento interactivo
3. Ocurrirá una de las siguientes situaciones:
   • Inaccesible: No anunciará su nombre, solo su rol y valor si están presentes.
   • Accesible: Anunciará su nombre en TalkBack.

Corregir Problemas

Para resolver problemas de Nombre de Vista Activa, agregue una etiqueta de texto o descripción del contenido a cada elemento interactivo para que TalkBack tenga un nombre significativo que anunciar.

Asegúrese de que el nombre que seleccione:

• Contenga la etiqueta visible del elemento.
• Describa la acción, no la apariencia. Por ejemplo, un icono de lupa debe etiquetarse como "Buscar", no como "icono de lupa".

Si el propósito de un elemento cambia según el estado (por ejemplo, un botón de Reproducir/Pausa), actualice el nombre cada vez que el estado cambie.

XML

Utilice la propiedad de texto del elemento o la descripción del contenido para asegurar que TalkBack tenga información precisa para compartir.

Button button = .......
button.setText("Button's Name");

ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");

Compose

Combine botones de imagen con una descripción del contenido o texto para indicar el propósito del elemento.

@Composable
fun EmailIconButton() {
    IconButton(
        onClick = { … },
    ) { 
        Icon(
            painter = painterResource(id = R.drawable.email_icon),
            contentDescription = “Send an Email”
        )
    }
}

Los botones que no son de imagen deben proporcionar texto para TalkBack.

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

React Native

Para solucionar un problema encontrado por esta regla, agregue un accessibilityLabel al elemento interactivo.

<TextInput
  ...
  accessibilityLabel="First Name"
/>

Cuando los elementos están agrupados dentro de un View contenedor, agregue las propiedades accessible y accessibilityLabel a él:

<View
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel={"Dark Mode"}
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
      setIsEnabled(!isEnabled) 
    }}
 >            
    <Switch
      trackColor={{ false: 'lightgray', true: 'dimgray' }}
      ios_backgroundColor={'lightgray'}
      thumbColor={'white'}
      onValueChange={ () => {
         setIsEnabled(!isEnabled)
      }}
      value={isEnabled}
      accessibilityElementsHidden={true}
     />
</View>

Flutter

Use la propiedad tooltip en IconButton para proporcionar un nombre accesible. Esto establece el nombre anunciado por TalkBack y también muestra un consejo visual al mantener presionado.

  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Para elementos interactivos con hijos solo de íconos, establezca semanticLabel directamente en el Icon:

  ElevatedButton(                                                                                                                                            
    onPressed: () {},
    child: const Icon(Icons.add, semanticLabel: 'Add item'),
  )

Al agrupar una etiqueta visible con un elemento interactivo, envuélvalos en MergeSemantics para que TalkBack los combine en un solo elemento enfocable:

  MergeSemantics(
    child: Row(
      children: [                                                                                                                                              
        const Text("Dark mode"),
        Switch(                                                                                                                                                
          value: _darkMode,                                                                                                                                  
          onChanged: (value) => setState(() => _darkMode = value),
        ),
      ],
    ),
  )

¿Puedo Ignorar Esta Regla?

Esta regla tiene un impacto crítico para los usuarios y no debería ser ignorada. Un elemento interactivo sin nombre es uno de los fallos de accesibilidad más fundamentales. Los usuarios de TalkBack y Voice Access están efectivamente bloqueados de usar un elemento sin un nombre accesible. Tome medidas para remediar todas las instancias de este problema antes de abordar problemas de menor prioridad.

Preguntas Frecuentes

Cuando uso TalkBack, escucho el contenido leído en voz alta después de enfocar el elemento. ¿Por qué sigue fallando esta regla? Si a un elemento le falta un nombre definido, el lector de pantalla a menudo anunciará su valor. Sin embargo, el valor no es un sustituto del nombre accesible que falta.

Recursos

Páginas del Curso de Deque University

• Ver Android móvil nativo en 4.1.2a Nombre, Rol, Valor (A)

  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
  • Entendiendo SC 4.1.2, Nombre, Rol, Valor (Nivel A)