Nombre de control activo

Cualquier vista interactiva debe tener un nombre accesible disponible para tecnologías de asistencia como VoiceOver y Voice Control.

Impacto

Las personas que utilizan VoiceOver son las más afectadas. Un elemento de control sin nombre no transmitirá el contexto completo ni el propósito a la persona que interactúa con el control.

Confirmación

1. Activar VoiceOver
2. Enfoque el control
3. Ocurrirá uno de los siguientes casos:
   • Inaccesible: No anunciará su nombre, sólo su rol y valor si está presente.
   • Accesible: Anunciará su nombre en VoiceOver.

Cómo solucionarlo

UIKit

Para solucionar un problema encontrado por esta regla, agregue un [missing term] accessibilityLabel al control.

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Asegúrese de que el texto del control sea significativo o proporcione una [missing term] accessibilityLabel si se necesita más contexto.

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

Asegúrese de que la imagen tenga un nombre significativo. Tenga en cuenta que esta no será una opción si se admiten varios idiomas. Si el nombre no es viable, establezca una [missing term] accessibilityLabel en la imagen.

Alternativamente, combine el control y sus subvistas para crear un solo elemento. Si no hay texto significativo disponible, establezca una [missing term] 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)
}

React Native

Para solucionar un problema detectado por esta regla, agregue un accessibilityLabel al componente de control.

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

Cuando los elementos se agrupan dentro de una vista contenedora, agregue la propiedad accessible y la propiedad accessibilityLabel a la vista contenedora:

<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>