Controllo attivo nidificato

Un elemento di accessibilità non dovrebbe avere più controlli attivi incorporati al suo interno. Ogni controllo attivo dovrebbe essere messo a fuoco e interagito con esso individualmente.

Impatto

Le persone che utilizzano TalkBack sono quelle maggiormente colpite. TalkBack non può attivare più di un elemento attivo all'interno di un altro elemento di accessibilità.

Conferma

1. Attiva TalkBack
2. Tentare di focalizzare il controllo
3. Tentativo di attivare il controllo
4. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: è attivato un elemento diverso.
   • Inaccessibile: l'elemento è attivato, ma la sua area di messa a fuoco contiene un altro elemento.
   • Inaccessibile: non succede nulla.
   • Accessibile: il controllo è attivato ed è l'unico controllo nella sua area di focus.

Come risolvere

Evitare elementi cliccabili nidificati. Assicurarsi che ogni elemento cliccabile possa essere messo a fuoco tramite la tecnologia di accessibilità. Le visualizzazioni accessibili senza tecnologie assistive dovrebbero essere disponibili a chiunque utilizzi tecnologie assistive.

XML

Evitare di impostare la proprietà importantForAccessibility su no su tutte le viste cliccabili nidificate all'interno di un layout.

Compose

Nell'esempio seguente, rimuovi invisibleToUser per garantire che le visualizzazioni siano disponibili a chiunque utilizzi tecnologie assistive. Si noti che il genitore è cliccabile e potrebbe dare origine a comportamenti indesiderati anziché interagire direttamente con le viste "Impostazioni" o "Informazioni".

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

Un esempio calzante sarebbe che tutte le viste fossero visibili per l'integrazione con la tecnologia assistiva con un genitore che non è cliccabile:

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}

React Native

Un controllo incorporato in un altro controllo non dovrebbe essere interattivo o attivabile. Il controllo principale dovrebbe essere focalizzabile e cliccabile. Per ottenere questo risultato, assicurati che l'elemento padre sia accessibile e disponga di un'azione di click. Il componente figlio dovrebbe avere importantForAccessibility impostato su no-hide-descendants.

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => props.navigation.navigate('FocusableTextExample')}
   accessible={true}
   accessibilityLabel={"Purchase items in your shopping cart"}>
     <Button title="Buy"
       importantForAccessibility='no-hide-descendants'
       accessibilityElementsHidden='true'
       adjustsFontSizeToFit={true}
       marginBottom={20}
       titleStyle={{
         color: "white",
         fontSize: 20,
        }}
        buttonStyle={{
          height: 50,
          width: 200
        }}
     />
</TouchableOpacity>