Nombre de Control Activo

Qué Verificamos

Un elemento interactivo debe tener un nombre accesible disponible para tecnologías de asistencia como VoiceOver y Control por Voz.

Ejemplo Fallido ❌

Sin nombre (accessibilityLabel) configurado.

VoiceOver lee "Button"

Voice Control — el usuario dice „Notificaciones“
El elemento no responde ya que no tiene un nombre

Ejemplo Aprobado ✅

accessibilityLabel=
'Notifications'

VoiceOver lee "Notifications, button"

Voice Control — el usuario dice „Notificaciones“
El elemento se activa porque su nombre coincide

A Simple Vista

• Esta regla tiene un impacto crítico para los usuarios
• Cada elemento interactivo necesita un nombre: botones, enlaces y entradas requieren un nombre accesible que VoiceOver pueda anunciar
• Si un elemento interactivo no tiene texto visible, proporcione uno explícitamente usando accessibilityLabel para darle un nombre significativo
• No dejes a VoiceOver sin nada que decir: un elemento que solo anuncia su rol o valor - sin nombre - no proporciona a los usuarios un contexto preciso de lo que hace
• VoiceOver intentará anunciar algo (como el texto del botón o el nombre de la imagen), por lo que es mejor proporcionar un nombre preciso e intencionado

Impacto en los Usuarios

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

Cuando un elemento interactivo - como un botón, elemento de formulario o control personalizado - no tiene un nombre accesible, VoiceOver no tiene nada que anunciar cuando este elemento está enfocado. Por ejemplo, podrías tener un botón con una imagen de una flecha subrayada que indica que el usuario puede descargar. Sin un nombre accesible, VoiceOver solo anunciará „Botón, doble toque para activar“.

Esta regla también tiene un impacto para las personas que usan Control por Voz. Los usuarios de Control por Voz que intenten activar el elemento diciendo su etiqueta visible encontrarán que no responde.

Confirmar Problema de Nombre de Control Activo

1. Activa VoiceOver
2. Enfoca el elemento interactivo
3. Una de las siguientes cosas sucederá:
   • Inaccesible: No anunciará su nombre, solo su rol y valor si están presentes.
   • Accesible: Anunciará su nombre en VoiceOver.

Solucionar Problemas

Para resolver problemas de Control Activo, añade una etiqueta de accesibilidad a cada elemento interactivo para que VoiceOver tenga un nombre significativo que anunciar. Asegúrate de que el nombre que selecciones contenga la etiqueta visible del elemento.

Asegúrate de que el nombre que elijas describa la acción, no la apariencia. Un ícono de una lupa debe etiquetarse como „Buscar“, no como „icono de lupa“.

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

UIKit

Para solucionar un problema encontrado por esta regla, añade un accessibilityLabel al control.

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Asegúrate de que el texto del elemento sea significativo o proporciona un accessibilityLabel si se necesita más contexto.

Caso de uso: Botón con una imagen como su etiqueta

Asegúrate de que la imagen tenga un nombre significativo. Debes saber que esto no será una opción cuando se soporten múltiples idiomas. Si el nombre no es viable, establece un accessibilityLabel en la imagen.

Alternativamente, combina un elemento padre (por ejemplo, un contenedor genérico) y sus hijos (por ejemplo, texto y un botón) para crear un elemento único. Si no hay texto significativo disponible, establece un accessibilityLabel en toda la vista como se muestra a continuación.

var body: some View {
    HStack(alignment: .center, spacing: 10,
           content: {
        Text("axe DevTools for iOS")
        Spacer()
        Button(action: { openLink() },
               label: {
            Image(systemName: "arrow.up.forward.app")
                .accessibilityHidden(true)
                .frame(minWidth: 50, minHeight: 50)
        })
        .accessibility(removeTraits: .isStaticText)
        .accessibility(removeTraits: .isButton)
        .accessibility(addTraits: .isLink)
    }).padding(16)
        .accessibilityElement(children: .combine)
        // .accessibilityLabel("Axe DevTools for iOS") <-- Add when `Text` is missing to ensure a name is present
}

React Native

Para solucionar un problema encontrado por esta regla, añade un accessibilityLabel al elemento interactivo.

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

Cuando los elementos están agrupados dentro de un View contenedor, añade las propiedades accessible y accessibilityLabel a este:

<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

Usa la propiedad tooltip en IconButton para proporcionar un nombre accesible. Esto establece el nombre que announce VoiceOver.

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

Al agrupar una etiqueta visible con un elemento interactivo, envuélvelos en MergeSemantics para que VoiceOver los combine en un único elemento focalizable:

  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 debe ser ignorada. Un elemento interactivo sin nombre es una de las fallas más fundamentales en accesibilidad. Los usuarios de VoiceOver y de Control por Voz tendrán dificultades para utilizar un elemento que no tenga un nombre accesible. Tomen medidas para remediar todos los casos de este problema antes de abordar cuestiones de menor prioridad.

Preguntas frecuentes

Cuando uso VoiceOver, escucho el contenido leído en voz alta después de enfocar el elemento. ¿Por qué sigue fallando esta regla? Si un elemento carece de 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. Para imágenes en botones, específicamente, VoiceOver puede anunciar el nombre del archivo de la imagen. Aunque el nombre del archivo sea descriptivo, esto no reemplaza al atributo de nombre accesible que falta.

Recursos

Páginas de Cursos de Deque University

• Ve iOS Móvil Nativo bajo 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 al Contenido en la Web (WCAG) 2.1
  • Comprender SC 4.1.2, Nombre, Rol, Valor (Nivel A)