Azione inaccessibile

Le visualizzazioni interattive dovrebbero poter essere focalizzate tramite tecnologie assistive.

Nota: questa regola era precedentemente denominata Visualizzazione accessibile inattiva.

Impatto

I problemi riscontrati da questa regola hanno un impatto su chiunque utilizzi tecnologie assistive. L'impossibilità di interagire con il controllo durante l'uso della tecnologia assistiva (TA) quando è possibile interagire con lo stesso controllo senza TA rappresenta un problema.

Conferma

1. Attiva TalkBack o SwitchAccess
2. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: non è possibile mettere a fuoco la vista né interagire con essa.
   • Accessibile: la vista è focalizzata e disponibile per l'interazione.

Come risolvere

XML

Evitare di impostare la proprietà importantForAccessibility su visualizzazioni toccabili che contengono informazioni significative per no. Le visualizzazioni a cui le persone possono accedere senza tecnologie assistive dovrebbero essere disponibili anche per coloro che utilizzano tecnologie assistive.

Compose

Evitare di contrassegnare le viste Compose tappabili con informazioni significative come invisibleToUser. Le visualizzazioni a cui le persone possono accedere senza tecnologie assistive dovrebbero essere disponibili anche per coloro che utilizzano tecnologie assistive.

In entrambi gli esempi seguenti, rimuovere invisibleToUser per garantire che le visualizzazioni siano disponibili per le persone che utilizzano tecnologie assistive.

Button(onClick = {  },
    modifier = Modifier.semantics {
        //Remove the below API to make it accessible
        invisibleToUser()
    }
) {
    Text("Click here")
}


FloatingActionButton(onClick = {  }) {
    Image(
        painter = painterResource(id = R.drawable.floating_button),
        contentDescription = "floating button",
        Modifier.semantics { 
            //Remove the below API to make it accessible
            invisibleToUser() 
        }
    )
}

React Native

Questo problema di accessibilità non può verificarsi sulla maggior parte dei controlli toccabili o premuti in React Native; tuttavia, questo problema può verificarsi con alcuni controlli attivi personalizzati.

Opzione 1: consentire alla vista padre di gestire il focus Imposta la proprietà accessible della vista contenitore su true e la sua proprietà accessibilityElementsHidden su false. Assegnare il valore appropriato accessibilityRole per far corrispondere il comportamento previsto. Queste proprietà consentiranno l'attivazione del controllo personalizzato tramite tecnologia assistiva.

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
>
  <Image 
    source={DequeLogo}
    style={{ width: 100, height: 100 }} 
  />
</View>

Opzione 2: consentire all'elemento di gestire il focus Sul controllo, imposta la proprietà accessible su true, accessibilityElementsHidden su false e assegna accessibilityRole appropriata per far corrispondere il comportamento previsto. Queste proprietà consentiranno l'attivazione del controllo personalizzato tramite tecnologia assistiva.

<Image
  source={DequeLogo}
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityRole='link'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
  style={{ width: 100, height: 100 }}
/>