A11y Element Focus Box

Cosa Verifichiamo

Il percorso di accessibilità di un elemento, o la casella di messa a fuoco di VoiceOver, deve racchiudere completamente il suo frame visivo sullo schermo.

Questa regola applica una Migliore Pratica Deque. Puoi disattivare questa regola dalla Dashboard Mobile oppure ignorando la regola nei test scritti per iOS.

Scopri come disattivare le regole dalla Dashboard Mobile.

Esempio Errato ❌

VoiceOver è focalizzato su un pulsante, ma la focus box appears offset - parzialmente al di fuori dei confini visibili del pulsante

L'area evidenziata non corrisponde all'elemento annunciato, rendendo difficile per gli utenti vedenti di VoiceOver seguire

Esempio Corretto ✅

VoiceOver è focalizzato sullo stesso pulsante e la focus box fully contains the element's visual frame

L'area evidenziata corrisponde accuratamente a ciò che l'utente vede sullo schermo, fornendo agli utenti vedenti di VoiceOver un chiaro indicatore visivo di ciò che è a fuoco

In sintesi

• Questa regola ha un impatto moderato per gli utenti vedenti che utilizzano anche VoiceOver
• La casella di messa a fuoco di VoiceOver deve corrispondere ai confini visivi sullo schermo dell'elemento che sta annunciando
• Evita di usare accessibilityPath o accessibilityFrame se possibile - VoiceOver calcola automaticamente il frame corretto
• Se devi ignorare il frame, ricalcola le coordinate ogni volta che l'elemento si sposta (come quando si scorre)

Impatto sugli Utenti

Gli utenti vedenti che utilizzano anche VoiceOver sono i più colpiti. VoiceOver annuncerà i dettagli di un elemento sullo schermo, ma la casella di messa a fuoco apparirà parzialmente o completamente fuori dall'elemento annunciato. Questo disallineamento tra il contenuto parlato e l'evidenziazione visibile rende difficile seguire e capire cosa è a fuoco.

Conferma Problema A11y Element Focus Box

1. Attiva VoiceOver
2. Focalizza l'elemento
3. Accadrà una delle seguenti cose:
   • 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 messa a fuoco di VoiceOver conterrà completamente l'elemento

Correggi Problemi

I problemi trovati da questa regola sono quasi sempre causati da un uso scorretto di accessibilityPath o accessibilityFrame. L'approccio più sicuro è rimuoverli e lasciare che VoiceOver calcoli automaticamente la casella di messa a fuoco. Se è richiesto un frame personalizzato, le coordinate devono essere ricalcolate rispetto all'elemento radice ogni volta che la sua posizione cambia.

UIKit

Un uso scorretto di accessibilityPath o accessibilityFrame su un elemento risulterà in un problema rilevato da questa regola. Correggi in uno dei due modi:

• Rimuovi accessibilityPath o accessibilityFrame se non sono necessari. VoiceOver calcola automaticamente le coordinate sullo schermo e disegna la casella di messa a fuoco corretta.
• Se devi ignorare il frame, converti il frame dell'elemento nelle coordinate della vista radice e riassegna il percorso ogni volta che l'elemento si muove (come 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

Questo tipo di problema di accessibilità non è previsto all'interno delle viste SwiftUI.

React Native

Questo tipo di problema di accessibilità non è previsto con elementi predefiniti Touchable o Pressable.

Quando si aggiunge messa a fuoco a un altro tipo di elemento, imposta i prop accessible e accessibilityElementsHidden direttamente su quell'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 all'interno di un View contenitore, imposta i prop accessible e accessibilityElementsHidden sulla 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>

Posso Ignorare Questa Regola?

A11y Element Focus Box ha un impatto moderato per gli utenti. Poiché questa è una regola di Migliore Pratica, può essere disattivata dalla Dashboard Mobile o soppressa nei singoli test. Tuttavia, una casella di messa a fuoco disallineata crea un'esperienza confusa per gli utenti vedenti di VoiceOver ed è utile correggerla quando la causa è una accessibilityPath o una accessibilityFrame configurata in modo errato. Scopri di più su ignorare le regole.

Risorse

Pagine dei Corsi Deque University

• Criterio di Successo 2.4.7 - Focus Visibile (AA)
• 2.4.7a - Focus Visibile

Nota: l'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre Risorse

• Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) 2.1, Raccomandazione W3C
  • Criterio di Successo 2.4.7 - Fuoco Visibile
• Documentazione per Sviluppatori Apple
  • accessibilityFrame
  • accessibilityPath