Controllo Attivo Annidato

Scopri come stiamo utilizzando l'intelligenza artificiale per questa regola!

Cosa Verifichiamo

Un elemento di accessibilità non dovrebbe avere più controlli attivi incorporati al suo interno. TalkBack non può attivare più di un controllo all'interno di un singolo elemento di accessibilità, quindi l'utente dovrebbe poter focalizzare e interagire individualmente con ogni controllo attivo.

Esempio Errato ❌

TalkBack focuses each entire card as a single unit

I pulsanti "Aggiungi al carrello", lista dei desideri e condividi annidati all'interno di ogni scheda non sono raggiungibili

Gli utenti di TalkBack non possono attivare i controlli individuali all'interno della scheda

Esempio Corretto ✅

Ogni controllo all'interno di una scheda è individually focusable da TalkBack

TalkBack naviga all'immagine, nome del prodotto, pulsanti "Aggiungi al carrello", lista dei desideri e condividi come elementi separati

Gli utenti possono attivare ciascuna azione in modo indipendente

In Sintesi

• Questa regola ha un impatto critico per gli utenti
• Un elemento di accessibilità non dovrebbe contenere più controlli interattivi che sono individualmente cliccabili ma nascosti dalla tecnologia assistiva
• TalkBack può attivare solo una azione per ciascun elemento focalizzato - se più controlli sono annidati e nascosti, gli utenti non possono raggiungerli in modo indipendente

Impatto sugli Utenti

Le persone che utilizzano TalkBack sono le più colpite. Quando più controlli attivi sono annidati all'interno di un singolo elemento di accessibilità, TalkBack può attivarne solo uno o potrebbe attivare completamente quello sbagliato. Questo significa che gli utenti potrebbero attivare un'azione non voluta, non ricevere alcuna risposta oppure essere completamente incapaci di accedere a certi controlli.

Conferma il Problema di Controllo Attivo Annidato

1. Attiva TalkBack
2. Prova a focalizzare il controllo
3. Prova ad attivare il controllo
4. Si verificherà una delle seguenti condizioni:
   • Inaccessibile: Non succede nulla
   • Inaccessibile: Il controllo viene attivato, ma la sua cornice di focus contiene un altro controllo
   • Inaccessibile: Un diverso controllo viene attivato
   • Accessibile: Il controllo viene attivato ed è l'unico controllo nella sua cornice di focus

Risolvere i Problemi

Evita elementi cliccabili annidati. Assicurati che ogni elemento cliccabile sia individualmente focalizzabile dalla tecnologia assistiva. Se un elemento genitore deve gestire un'azione complessiva, i controlli figlio dovrebbero essere nascosti dalla tecnologia assistiva affinché gli utenti non siano presentati con interazioni conflittuali o irraggiungibili.

XML

Do not set the importantForAccessibility property to "no" on clickable elements nested inside a layout. If child controls should not be individually accessible, ensure the parent handles the action and is the only focusable element.

Compose

Evita il seguente schema, dove un genitore cliccabile contiene figli nascosti con invisibleToUser() — gli utenti di TalkBack non potranno raggiungere i controlli figlio nascosti:

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

Se i figli hanno azioni individuali, assicurati che il genitore non sia anche cliccabile. L'esempio corretto qui sotto mostra ciascun figlio come cliccabile indipendentemente, con un genitore non cliccabile:

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

React Native

Se un controllo figlio non dovrebbe essere focalizzato individualmente, assicurati che l'elemento genitore sia accessibile e gestisca l'azione. Imposta importantForAccessibility='no-hide-descendants' sul figlio così che sia nascosto dalla tecnologia assistiva:

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

Posso Ignorare Questa Regola?

Il Controllo Attivo Annidato ha un impatto critico per gli utenti, e raccomandiamo vivamente di risolvere questi problemi. Dal momento che questa è una regola sperimentale, dovresti verificare i risultati manualmente. Se hai confermato che tutti i controlli attivi all'interno dell'elemento sono raggiungibili e attivabili individualmente da TalkBack, potrebbe essere accettabile ignorare il rilevamento. Scopri di più su ignorare le regole.

Risorse

Pagine dei Corsi Deque University

• 2.1.1 Tastiera (A)

Nota: L'accesso completo alle risorse della Deque University richiede un abbonamento.

Altre Risorse

• Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) 2.1, Raccomandazione W3C
  • Criterio di successo 2.1.1 - Tastiera
• Documenti di comprensione WCAG 2.1
  • Comprensione 2.1.1 A - Tastiera