Box Focus dell'Elemento di Accessibilità

Garantisce che il percorso di accessibilità di una vista, o la casella di messa a fuoco di VoiceOver, incapsuli il proprio telaio visivo sullo schermo.

Questa regola impone una buona pratica di Deque. Puoi disattivare questa regola dalla Dashboard Mobile o ignorando la regola nei test scritti per iOS.

Scopri come disattivare le regole dalla dashboard mobile.

Impatto

Le persone che usano VoiceOver con vista sono quelle più colpite. VoiceOver annuncerà i dettagli di un elemento sullo schermo, ma l'attenzione sarà parzialmente o interamente fuori dall'elemento annunciato.

Conferma

1. Attiva VoiceOver
2. Metti a fuoco l'elemento
3. Si verificherà una delle seguenti situazioni:

• Inaccessibile: la casella di messa a fuoco di VoiceOver conterrà parzialmente l'elemento.
• Inaccessibile: la casella di messa a fuoco di VoiceOver non conterrà affatto l'elemento.
• Accessibile: la casella di focus di VoiceOver conterrà completamente l'elemento.

Come risolvere

UIKit

L'uso non corretto di accessibilityPath o accessibilityFrame in una vista farà sì che questa regola rilevi un problema. Risolvi in uno dei due modi seguenti:

• Non utilizzare accessibilityPath o accessibilityFrame. VoiceOver calcola automaticamente le coordinate sullo schermo della vista e dovrebbe tracciare correttamente un bordo (il riquadro di messa a fuoco di VoiceOver) attorno all'elemento attualmente in focus. Utilizzando una di queste API di accessibilità su un elemento, la casella di messa a fuoco di VoiceOver per quell'elemento verrà ridisegnata.
• Se devi ridisegnare la casella di messa a fuoco di VoiceOver, assicurati di calcolare correttamente le coordinate sullo schermo dell'elemento e di ricalcolare e ridefinire la casella di messa a fuoco ogni volta che l'elemento si sposta (ad esempio in un 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

Non è previsto che questo tipo di problema di accessibilità si verifichi nelle viste di SwiftUI.

React Native

Non è previsto che questo tipo di problema di accessibilità si verifichi con gli elementi Touchable o Pressable predefiniti.

Quando aggiungi il focus a un altro tipo di elemento, aggiungi la accessible prop e la accessibilityElementsHidden prop direttamente all'elemento:

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

Quando gli elementi sono raggruppati insieme all'interno di una vista contenitore, aggiungi la accessible prop e la accessibilityElementsHidden prop alla vista contenitore:

<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>