Boîte de focus d'éléments d'accessibilité

Garantit que le chemin d'accessibilité d'une vue, ou la zone de focus VoiceOver, encapsule son propre cadre visuel à l'écran.

Cette règle applique une meilleure pratique Deque. 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 qui utilisent VoiceOver et ayant la capacité de voir sont les plus touchées. VoiceOver annoncera les détails d'un élément à l'écran, mais le focus apparaîtra partiellement ou entièrement hors de l'élément annoncé.

Confirmation

1. Activer VoiceOver
2. Focaliser l'élément
3. L’une des situations suivantes se produira :

• Inaccessible : la zone de focus de VoiceOver ne contiendra que partiellement l'élément.
• Inaccessible : la zone de focus de VoiceOver ne contiendra pas du tout l'élément.
• Accessible : la zone de focus de VoiceOver contiendra entièrement l'élément.

Comment corriger

UIKit

L'utilisation incorrecte de accessibilityPath ou accessibilityFrame sur une vue entraînera la détection d'un problème par cette règle. Corrigez de l'une des deux manières suivantes :

• Ne pas utiliser accessibilityPath ou accessibilityFrame. VoiceOver calcule automatiquement les coordonnées à l'écran de la vue et doit dessiner correctement une bordure (la zone de focus de VoiceOver) autour de l'élément en cours de sélection. L'utilisation de l'une de ces API d'accessibilité sur un élément redessinera la zone de focus de VoiceOver pour cet élément.
• Si vous devez redessiner la zone de focus de VoiceOver, assurez-vous que vous calculez correctement les coordonnées à l'écran de l'élément et que vous recalculez et redéfinissez la zone de focus chaque fois que l'élément se déplace (comme dans UIScrollView) :

// Assuming we are in a ViewController
let button = UIButton()

// If not within a ViewController, self.view should be replaced with the rootView of the screen
let rootview = self.view
let onScreenFrame = button.superview!.convert(button.frame, to: rootview)
button.accessibilityPath = UIBezierPath(rect: onScreenFrame)

SwiftUI

Ce type de problème d’accessibilité ne devrait pas se produire dans les vues SwiftUI.

React Native

Ce type de problème d'accessibilité ne devrait pas se produire avec les éléments Touchable ou Pressable par défaut.

Lorsque vous ajoutez le focus à un autre type d'élément, ajoutez la propriété accessible et la propriété accessibilityElementsHidden directement à l'élément :

<Image
   source={DequeLogo}
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel="Deque Systems Logo"
   accessibilityRole="image"
   style={{ width: 100, height: 60 }}
   resizeMode='center'
/>

Lorsque des éléments sont regroupés dans une vue contenante, ajoutez la propriété accessible et la propriété accessibilityElementsHidden à la vue contenante :

<View
  style={styles.rowContainer}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel="Dark Mode"
  accessibilityValue={{ text: "" + secondSwitchIsEnabled }}
  accessibilityRole="switch"
  onTouchStart={() => { 
    setSecondSwitchIsEnabled(!secondSwitchIsEnabled)
  }}>
    <Text style={{ fontSize: 18 }}>Dark Mode</Text>
    <Switch
        style={styles.standardSwitch}
        importantForAccessibility='no-hide-descendants'
        value={secondSwitchIsEnabled}

         onValueChange={() => {
           setSecondSwitchIsEnabled(!secondSwitchIsEnabled);
         }}
    />
 </View>