Caractéristiques Contradictoires

Ce Que Nous Vérifions

Chaque vue - un élément interactif tel qu'un bouton, une étiquette ou un contrôle personnalisé - peut se voir attribuer des caractéristiques d'accessibilité. Ces métadonnées indiquent à VoiceOver de quel type d'élément il s'agit et comment interagir avec lui. Cette règle vérifie qu'aucune vue n'est attribuée à des caractéristiques qui se contredisent ou qui interfèrent avec la navigation de VoiceOver.

Cette règle impose une bonne pratique définie sous les Caractéristiques d'Accessibilité UIKit d'Apple. Vous pouvez désactiver cette règle depuis le Tableau de Bord Mobile ou en en ignorant la règle dans les tests écrits pour iOS.

Exemple Échoué ❌

Un bouton est attribué à both the button and link traits

VoiceOver annonce two conflicting roles simultanément :
« Lire l'article, Bouton, Lien »

Ceci est déroutant et trompeur — un seul élément ne devrait jamais avoir deux rôles contradictoires

Exemple Réussi ✅

L'élément se voit attribuer only the link trait

VoiceOver annonce un seul rôle clair :
« Lire l'article, Lien »

Les gestes de navigation fonctionnent comme prévu pour le rôle attribué

À Vue D'Oeil

• Cette règle a un impact critique pour les utilisateurs
• Les caractéristiques d'accessibilité indiquent à VoiceOver ce qu'est un élément et comment interagir avec lui - des caractéristiques contradictoires produisent un comportement confus ou défectueux
• Conflits courants : caractéristiques de rôle comme « bouton » + « lien », ou caractéristiques de navigation comme « en-tête » + « ajustable »

Impact sur les Utilisateurs

Les personnes utilisant VoiceOver et Switch Control sont les plus impactées. Lorsqu'un élément a des caractéristiques contradictoires, VoiceOver peut annoncer deux rôles simultanément (par exemple, « Bouton, Lien »), ce qui est déroutant et trompeur. Certaines combinaisons de caractéristiques - telles que « en-tête » et « ajustable » - peuvent également perturber les gestes de navigation VoiceOver, rendant certaines parties de l'écran inaccessibles.

Confirmer le Problème des Caractéristiques Contradictoires

1. Activez VoiceOver
2. Concentrez-vous sur l'élément
3. L'une des situations suivantes se produira :
   • Inaccessible : VoiceOver annonce deux rôles contradictoires (comme « Bouton » et « Lien »)
   • Inaccessible : Un geste de navigation VoiceOver cesse de fonctionner (par exemple, lorsqu'on utilise à la fois « en-tête » et « ajustable »)
   • Accessible : Tous les rôles sont distincts et les gestes de navigation fonctionnent comme prévu

Corriger les Problèmes

Pour résoudre un problème de Caractéristiques Contradictoires, assurez-vous que chaque élément n'a qu'une seule caractéristique de rôle et que toutes les caractéristiques attribuées sont compatibles entre elles.

UIKit

Pour corriger dans Storyboard :

1. Sélectionnez l'élément avec des caractéristiques d'accessibilité contradictoires.
2. Assurez-vous que le panneau Inspecteur est visible.
3. Sélectionnez le Inspecteur d'Identité.
4. Sous Accessibilité, trouvez la catégorie Caractéristiques et décochez la caractéristique contradictoire.

Pour corriger dans le code, supprimez la caractéristique contradictoire. Par exemple, si un bouton est incorrectement attribué à la fois .button et .link :

button.accessibilityTraits = [.button, .link]

Conservez uniquement la caractéristique qui reflète le comportement réel de l'élément. Si l'élément se comporte comme un lien, retirez la caractéristique de bouton :

button.accessibilityTraits = .link

SwiftUI

Utilisez .accessibility(addTraits:) et .accessibility(removeTraits:) ensemble pour vous assurer que l'élément n'a que les caractéristiques qui reflètent précisément son comportement. Par exemple, si un bouton imite un lien, retirez la caractéristique de bouton par défaut et ajoutez la caractéristique de lien :

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

React Native

Cette règle est peu susceptible de se déclencher sur les éléments React Native, car accessibilityRole n'accepte qu'une seule valeur. Utilisez la valeur accessibilityRole qui décrit le mieux le comportement attendu de l'élément :

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

Puis-je ignorer cette règle ?

Les Traits en conflit ont un Impact critique pour les utilisateurs, et nous recommandons de prendre des mesures pour remédier à ce problème. Bien que cette règle applique une bonne pratique d'Apple, elle a un impact très important. Si un contrôle a des traits conflictuels, les utilisateurs de VoiceOver peuvent ne pas être en mesure d'interagir avec. Cependant, il est possible de désactiver cette règle depuis le Tableau de bord mobile ou d'ignorer les constats individuels dans vos tests iOS. En savoir plus sur ignorer les règles.

Ressources

• Documentation Apple pour les développeurs
  • UIKit — accessibilityTraits
  • SwiftUI — AccessibilityTraits