Características en Conflicto

Qué Verificamos

Cada vista - un elemento interactivo como un botón, etiqueta o control personalizado - puede tener asignadas características de accesibilidad. Estos metadatos le indican a VoiceOver qué tipo de elemento es y cómo interactuar con él. Esta regla comprueba que ninguna vista tenga asignadas características que se contradigan entre sí o que interfieran con la navegación de VoiceOver.

Esta regla refuerza una práctica recomendada definida bajo Características de Accesibilidad de UIKit de Apple. Puedes desactivar esta regla desde el Tablero Móvil o ignorando la regla en pruebas escritas para iOS.

Ejemplo Fallido ❌

Un botón tiene asignado both the button and link traits

VoiceOver anuncia two conflicting roles simultáneamente:
“Leer artículo, Botón, Enlace”

Esto es confuso y engañoso: un solo elemento nunca debe tener dos roles contradictorios

Ejemplo Exitoso ✅

Al elemento se le asigna only the link trait

VoiceOver anuncia un solo rol claro:
“Leer artículo, Enlace”

Los gestos de navegación funcionan como se espera para el rol asignado

De un Vistazo

• Esta regla tiene un impacto crítico para los usuarios
• Las características de accesibilidad indican a VoiceOver qué es un elemento y cómo interactuar con él; las características en conflicto producen un comportamiento confuso o defectuoso
• Conflictos comunes: características de rol como "botón" + "enlace", o características de navegación como "encabezado" + "ajustable"

Impacto en los Usuarios

Las personas que usan VoiceOver y Control por Botón son las más afectadas. Cuando un elemento tiene características en conflicto, VoiceOver puede anunciar dos roles simultáneamente (por ejemplo, "Botón, Enlace"), lo cual es confuso y engañoso. Ciertas combinaciones de características, como "encabezado" y "ajustable", también pueden romper los gestos de navegación de VoiceOver, haciendo que partes de la pantalla sean inalcanzables.

Confirmar Problemas de Características en Conflicto

1. Activa VoiceOver
2. Concéntrate en el elemento
3. Ocurrirá una de las siguientes opciones:
   • Inaccesible: VoiceOver anuncia dos roles en conflicto (como "Botón" y "Enlace")
   • Inaccesible: Un gesto de navegación de VoiceOver deja de funcionar (por ejemplo, al usar juntos "encabezado" y "ajustable")
   • Accesible: Todos los roles son distintos y los gestos de navegación funcionan como se espera

Solucionar Problemas

Para resolver un problema de Características en Conflicto, asegúrate de que cada elemento tenga solo un rol y que todas las características asignadas sean compatibles entre sí.

UIKit

Para corregir en Storyboard:

1. Selecciona el elemento con características de accesibilidad en conflicto.
2. Asegúrate de que el Panel de Inspección sea visible.
3. Selecciona el Inspector de Identidad.
4. Bajo Accesibilidad, encuentra la categoría Características y desmarca la característica en conflicto.

Para corregir en código, elimina la característica en conflicto. Por ejemplo, si a un botón se le asignan incorrectamente .button y .link:

button.accessibilityTraits = [.button, .link]

Mantén solo la característica que refleje el comportamiento real del elemento. Si el elemento se comporta como un enlace, elimina la característica de botón:

button.accessibilityTraits = .link

SwiftUI

Usa .accessibility(addTraits:) y .accessibility(removeTraits:) juntos para asegurar que el elemento solo tenga las características que reflejen con precisión su comportamiento. Por ejemplo, si un botón imita a un enlace, elimina la característica de botón predeterminada y agrega la característica de enlace:

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

React Native

Es poco probable que esta regla se active en elementos de React Native, porque accessibilityRole solo acepta un valor. Usa el valor de accessibilityRole que describa con mayor precisión el comportamiento esperado del elemento:

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

¿Puedo ignorar esta regla?

Rasgos en conflicto tienen un Impacto crítico para los usuarios, y recomendamos tomar medidas para remediar este problema. Aunque esta regla refuerza una buena práctica de Apple, tiene un gran impacto. Si un control tiene rasgos en conflicto, los usuarios de VoiceOver podrían no ser capaces de interactuar con él en absoluto. Aun así, es posible desactivar esta regla desde el Panel de control móvil o ignorar hallazgos individuales en tus pruebas de iOS. Aprende más sobre ignorando reglas.

Recursos

• Documentación para desarrolladores de Apple
  • UIKit — accessibilityTraits
  • SwiftUI — AccessibilityTraits