Rasgos conflictivos

Las vistas no deben tener rasgos de accesibilidad conflictivos.

Esta regla aplica una práctica recomendada definida en Características de accesibilidad de UIKit de Apple. Puede desactivar esta regla desde el Panel móvil o ignorando la regla en las pruebas escritas para iOS.

Aprenda cómo desactivar las reglas desde el Panel móvil.

Impacto

Las personas que utilizan VoiceOver y Switch Control son las más afectadas. Los rasgos conflictivos pueden provocar que los gestos de navegación en la tecnología de asistencia dejen de responder. Es posible que la función de un control se transfiera al usuario de forma incorrecta debido a un rasgo incompatible.

Confirmación

1. Activar VoiceOver
2. Enfocar el elemento
3. Ocurrirá uno de los siguientes casos:
   • Inaccesible: VoiceOver anunciará dos roles en conflicto (como "Botón" y "Enlace")
   • Inaccesible: un gesto de navegación de VoiceOver ya no funcionará (como usar "Heading" y "Adjustable" juntos)
   • Accesible: todos los roles tienen sentido y los gestos de navegación funcionan según lo previsto.

Cómo solucionarlo

Una selección incorrecta de características de accesibilidad provoca un problema detectado por esta regla. Lea más sobre las características de accesibilidad en la documentación de Apple para UIKit o SwiftUI.

UIKit

En el guión gráfico:

1. Seleccione el elemento de accesibilidad con rasgos de accesibilidad en conflicto.
2. Asegúrese de que el Panel de inspección esté visible.
3. Seleccione el Inspector de identidad.
4. Dentro de “Accesibilidad” hay una categoría llamada “Traits”. Anule la selección de la casilla de verificación del Trait de accesibilidad que esté en conflicto.

En código:

• Eliminar el rasgo de accesibilidad conflictivo. Por ejemplo, un botón puede tener los siguientes rasgos de accesibilidad:

button.accessibilityTraits = [.button, .link]

El botón solo debe tener uno de ellos, dependiendo del contexto del botón. En este caso el conflictivo era “enlace”. Para utilizar un botón como enlace, elimine la característica del botón correspondiente al comportamiento deseado.

button.accessibilityTraits = .link

SwiftUI

Al actualizar las características de accesibilidad, asegúrese de que cada característica refleje el uso adecuado del control. Por ejemplo, si un botón imita un enlace, eliminar el rasgo de accesibilidad "botón" predeterminado y agrega el rasgo "enlace".

    var body: some View {
        Button(action: { openLink() },
               label: {
            Text("Visit this Site!").padding()
        })
        .accessibility(addTraits: .isLink)
        .accessibility(removeTraits: .isButton)
    }

React Native

No se espera que esta regla falle en las vistas de React Native. React Native solo permite agregar un elemento a la accessibilityRole propiedad.

Consejo: para brindar una buena experiencia y seguir las mejores prácticas, utilice la propiedad accessibilityRole con el valor que describa con precisión el comportamiento esperado del elemento. Ejemplo: ajustar el accessibilityRole de un botón a enlace, cuando se comporta como un enlace.

<Button
  title={'Learn more about axeDevTools'}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  onPress={goToLink}
/>