Traits contradictoires

Les vues ne doivent pas avoir de traits d'accessibilité contradictoires.

Cette règle applique une bonne pratique définie dans les traits d'accessibilité UIKit d'Apple. Vous pouvez désactiver cette règle à partir du tableau de bord mobile ou en ignorant la règle dans les tests écrits pour iOS.

Apprenez comment désactiver les règles à partir du tableau de bord mobile.

Impact

Les personnes utilisant VoiceOver et Switch Control sont les plus touchées. Des traits conflictuels peuvent entraîner une absence de réponse des gestes de navigation dans les technologies d'assistance. Le rôle d'un contrôle peut être transmis de manière incorrecte à l'utilisateur en raison d'un trait incompatible.

Confirmation

1. Activer VoiceOver
2. Focaliser l'élément
3. L’une des situations suivantes se produira :
   • Inaccessible : VoiceOver annoncera deux rôles conflictuels (tels que « Bouton » et « Lien »)
   • Inaccessible : un geste de navigation VoiceOver ne fonctionnera plus (comme l'utilisation simultanée de « Heading » et « Adjustable »)
   • Accessible : tous les rôles ont du sens et les gestes de navigation fonctionnent comme prévu.

Comment corriger

Une sélection incorrecte des caractéristiques d'accessibilité provoque un problème détecté par cette règle. Pour en savoir plus sur les caractéristiques d'accessibilité, consultez la documentation d'Apple pour UIKit , SwiftUI ou [React Native].

UIKit

Dans le storyboard :

1. Sélectionnez l’élément d’accessibilité avec des attributs d’accessibilité conflictuels.
2. Assurez-vous que le panneau d’inspection est visible.
3. Sélectionnez l’inspecteur d’identité.
4. Sous « Accessibilité », il existe une catégorie appelée « Attributs ». Décochez la case de l'attribut d’accessibilité en conflit.

Dans le code :

• Supprimer le trait d'accessibilité conflictuel. Par exemple, un bouton peut avoir les Traits d'accessibilité suivants :

button.accessibilityTraits = [.button, .link]

Le bouton ne devrait en avoir qu'un seul, en fonction du contexte du bouton. Dans ce cas, le conflit était « lien ». Pour utiliser un bouton comme lien, retirez le trait de bouton pour le comportement souhaité.

button.accessibilityTraits = .link

SwiftUI

Lors de la mise à jour des caractéristiques d’accessibilité, assurez-vous que chaque caractéristique reflète l’utilisation appropriée du contrôle. Par exemple, si un bouton imite un lien, supprime la caractéristique d'accessibilité par défaut « bouton » et ajoute la caractéristique « lien ».

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

React Native

Cette règle ne devrait pas échouer sur les vues React Native. React Native n'autorise qu'un seul élément ajouté à la propriété accessibilityRole .

Astuce : pour offrir une bonne expérience et suivre les meilleures pratiques, utilisez la propriété accessibilityRole avec la valeur qui décrit avec précision le comportement attendu de l'élément. Exemple : ajuster le accessibilityRole lien d'un bouton, lorsqu'il se comporte comme un lien.

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