Nome della CheckBox

Cosa Controlliamo

Qualsiasi elemento CheckBox dovrebbe avere un nome accessibile disponibile per tecnologie assistive come TalkBack e Voice Access.

Esempio Non Corretto ❌

name = {nessuno}

TalkBack annuncia solo il valore e il ruolo
"Selezionato, CheckBox"

Voice Access - L'utente pronuncia "Iscriviti alla newsletter"
Questo non attiverà la casella di controllo poiché non ha un nome

Esempio Corretto ✅

name = "Iscriviti alla newsletter"

TalkBack annuncia the name, value, and role
"Iscriviti alla newsletter, Selezionato, CheckBox"

Voice Access - L'utente pronuncia "Iscriviti alla newsletter"
Questo attiva la casella di controllo perché il nome corrisponde

In Breve

• Questa regola ha un impatto serio per gli utenti
• Ogni casella di controllo ha bisogno di un nome: gli utenti che si affidano a TalkBack o Voice Access devono essere in grado di identificare e interagire con le caselle di controllo
• Associa un'etichetta visibile: usa un TextView (XML) o un componente Text (Compose) collegato alla casella di controllo
• Evita di utilizzare le proprietà Text e ContentDescription insieme — entrano in conflitto tra loro

Impatto sugli Utenti

Le persone che utilizzano tecnologie assistive come TalkBack e/o Voice Access sono le più colpite dai problemi rilevati da questa regola.

Quando un CheckBox non ha un nome accessibile, TalkBack annuncia solo il suo valore e ruolo — ad esempio, "Selezionato, CheckBox" — lasciando l'utente senza contesto su cosa stia selezionando. Questo rende impossibile comprendere lo scopo del controllo senza esplorazioni aggiuntive e impedisce agli utenti di Voice Access di attivare la casella di controllo pronunciando l'etichetta.

Conferma Problema Nome CheckBox

1. Attiva TalkBack
2. Prova a focalizzare il controllo
3. Accadrà una delle seguenti cose:
   • Inaccessibile: TalkBack annuncia solo il valore e il ruolo.
   • Accessibile: Sia il nome che il valore vengono letti da TalkBack.

Correggi i Problemi

Per risolvere un problema di Nome CheckBox, assicurati che ogni casella di controllo abbia un nome accessibile associandola a un'etichetta di testo visibile. In questo modo TalkBack annuncerà un nome significativo insieme al valore e al ruolo della casella di controllo. Gli utenti di Voice Access potranno attivare la casella di controllo pronunciando la sua etichetta.

XML

Associa un TextView con il CheckBox usando l'attributo labelFor. Questo collega l'etichetta visibile alla casella di controllo in modo che TalkBack annunci il testo dell'etichetta come nome accessibile della casella di controllo.

  <LinearLayout
      android:layout_width="wrap_content"                                       
      android:layout_height="wrap_content"
      android:orientation="horizontal">                                         
                                                                              
      <CheckBox                                                               
          android:id="@+id/subscribe_checkbox"
          android:layout_width="wrap_content"                                   
          android:layout_height="wrap_content" />
                                                                                
      <TextView                                                               
          android:layout_width="wrap_content"                                 
          android:layout_height="wrap_content"
          android:text="Subscribe to newsletter"                                
          android:labelFor="@id/subscribe_checkbox" />
                                                                                
  </LinearLayout>  

Se le viste sono create programmaticamente, o l'associazione non può essere effettuata in XML, usa setLabelFor per collegare l'etichetta alla casella di controllo nel codice.

TextView label = findViewById(R.id.checkbox_label);
CheckBox checkBox = findViewById(R.id.subscribe_checkbox);
label.setLabelFor(checkBox.getId());

Compose

Racchiudi la casella di controllo e un elemento di testo all'interno di un elemento genitore con il ruolo di accessibilità Checkbox, e assicurati che l'azione della casella di controllo possa essere invocata selezionando l'elemento genitore.

Row(modifier = Modifier
    .toggleable(
        value = checkedState,
        enabled = true,
        role = Role.Checkbox, // Parent element has the accessibility role
        onValueChange = { setCheckBoxState(!checkedState) } // 
    )
    .semantics(mergeDescendants = true) { }
    .constrainAs(labeledTextField) {
        setConstraints(top = parent.top, start = parent.start, end = parent.end)
    }
) {
    Checkbox(
        checked = checkedState,
        modifier = Modifier.padding(16.dp),
        onCheckedChange = null
    )

    Text(text = "Get Marketing emails", modifier = Modifier.padding(16.dp))
}

React Native

Nota: Il componente checkbox di React Native è stato deprecato, quindi questo si applicherà solo quando si utilizza un elemento checkbox di terze parti, o quando si crea un elemento personalizzato.

Per combinare una casella di controllo e un'etichetta in React Native, puoi racchiudere entrambi gli elementi all'interno di un TouchableOpacity:

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => {
     setSelection(!isSelected)
     }
   }
   accessible={true}
   accessibilityLabel={"Do you like React Native?"}
   accessibilityRole='checkbox'>
     <CheckBox
       importantForAccessibility='no-hide-descendants'
       value={isSelected}
       onValueChange={setSelection}
       style={styles.checkbox}
      />
     <Text>Do you like React Native?</Text>
</TouchableOpacity>

Per garantire che questo funzioni correttamente per tutti gli utenti:

• Imposta accessible={true} su TouchableOpacity in modo che la tecnologia assistiva focalizzi il gruppo come un singolo elemento
• Imposta accessibilityLabel per corrispondere esattamente all'etichetta di testo visibile
• Imposta accessibilityRole su checkbox per fornire il contesto corretto agli utenti delle tecnologie assistive
• Imposta importantForAccessibility='no-hide-descendants' su CheckBox in modo che non possa essere focalizzato individualmente
• Aggiungi un'azione onPress al TouchableOpacity per gestire l'attivazione della casella di controllo

Posso Ignorare Questa Regola?

Nome della CheckBox ha un impatto serio per gli utenti, e consigliamo di risolvere questo problema in quasi tutti i casi. Una casella di controllo senza nome accessibile non fornisce contesto agli utenti delle tecnologie assistive e impedisce completamente l'interazione con Voice Access. Scopri di più su ignorare le regole.

Risorse

Pagine dei corsi di Deque University

• Vedi Android Mobile Nativo sotto 4.1.2 Nome, Ruolo, Valore (A)

  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 4.1.2 – Nome, Ruolo, Valore (A)
  • Comprensione 4.1.2 – Nome, Ruolo, Valore