Nome dell'interruttore

Cosa Verifichiamo

Ogni elemento Switch dovrebbe avere un nome accessibile che descriva il suo scopo per le tecnologie assistive come TalkBack e Voice Access.

Esempio Errato ❌

L'interruttore non ha un nome accessibile.

TalkBack legge "Off, Switch."

Voice Access — l'utente non ha un'etichetta visibile da pronunciare per attivare l'interruttore.

Esempio Corretto ✅

L'interruttore è etichettato con testo visibile tramite labelFor o raggruppamento.

TalkBack legge "Dark Mode, Off, Switch."

Voice Access — l'utente pronuncia "Modalità Scura" per attivare l'interruttore.

In Sintesi

• Questa regola ha un impatto critico per gli utenti
• Ogni interruttore necessita di un nome accessibile che descriva cosa controlla
• Un nome come "Modalità Scura" è molto più utile di un'assenza di nome
• Il nome dovrebbe provenire da un'etichetta visibile quando possibile, utilizzando labelFor o tecniche di raggruppamento
• Evitare di impostare una descrizione del contenuto direttamente sull'interruttore a meno che lo stato (ad es. 'acceso'/'spento') non sia mantenuto

Impatto sugli Utenti

Le persone cieche, ipovedenti o che utilizzano accesso agli interruttori fanno affidamento sul nome accessibile per comprendere cosa fa un interruttore prima di interagire con esso. Senza un nome, TalkBack annuncia solo 'acceso' o 'spento' — non dando agli utenti alcun contesto su cosa stanno controllando.

Conferma Problema del Nome dell'Interruttore

1. Accendi TalkBack
2. Cerca di focalizzarti su un elemento Switch
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: TalkBack annuncia solo 'acceso' o 'spento'.
   • Accessibile: TalkBack annuncia il nome dell'interruttore e 'acceso' o 'spento'.

Correggi i Problemi

Un interruttore necessita di un nome accessibile affinché la tecnologia assistiva possa annunciare cosa l'interruttore controlla. Il miglior approccio è raggruppare o collegare l'etichetta e l'interruttore in modo che siano trattati come un unico elemento accessibile.

XML

Puoi fornire un'etichetta nell'elemento adiacente o avvolgere l'interruttore con la sua etichetta. Puoi anche manipolare il contentDescription, ma assicurati di mantenere lo stato 'acceso' e 'spento' per gli annunci di TalkBack.

layouts/activity.xml
<TextView
     android:id="@+id/label"
     android:text="@string/label_text"
     android:labelFor="@+id/switch">
<Switch
     android:id="@+id/switch"/>

...

strings.values/
<string name="label_text">Dark Mode</string>

Compose

Raggruppa un Text e un Switch in un layout unificato, come una Row. Applica il ruolo di switch e il modificatore toggleable al Text, e cancella le semantiche sul Switch usando Modifier.clearAndSetSemantics { }. In questo modo TalkBack si focalizzerà sull'etichetta, piuttosto che sull'elemento interruttore direttamente.

val (isSwitchChecked, setSwitchState) = remember { 
    mutableStateOf(true) 
}

Row(modifier = Modifier.semantics(mergeDescendants = true) { }) {
    Text(
        text = "Get Emails",
        modifier = Modifier
            .toggleable(
                value = isSwitchChecked,
                onValueChange = { 
                    setSwitchState(!isSwitchChecked) 
                },
                role = Role.Switch
            )
    )

    Switch(
        checked = isSwitchChecked,
        onCheckedChange = { 
            setSwitchState(!isSwitchChecked) 
        },
        modifier = Modifier
            .clearAndSetSemantics { }
    )
}

React Native

Per combinare un interruttore e un'etichetta in React Native, avvolgi entrambi i componenti all'interno di un componente TouchableOpacity:

<TouchableOpacity
   onPress={() => {
     setSwitchOn(!switchOn)
     Alert.alert("Switch on : " + !switchOn)}}
   style={styles.subContainer}
   accessible={true}
   accessibilityLabel={"Subscribe"}
   accessibilityRole='switch'>
      <Text style={{ fontSize: 22 }}>
         Subscribe
      </Text>
      <Switch
         importantForAccessibility='no-hide-descendants'
         onValueChange={() => {
            setSwitchOn(!switchOn)
            Alert.alert("Switch on : " + !switchOn)} }
        value={switchOn}
   />
</TouchableOpacity>

Per garantire che questo funzioni correttamente per tutti gli utenti:

• Imposta accessible={true} sul TouchableOpacity così che il gruppo venga focalizzato insieme
• Assicurati che la proprietà accessibilityLabel del TouchableOpacity corrisponda esattamente al testo visibile dell'etichetta
• Imposta il accessibilityRole a switch per comunicare il tipo di controllo corretto
• Imposta importantForAccessibility='no-hide-descendants' sull'elemento Switch affinché non possa essere focalizzato individualmente
• Aggiungi un'azione onPress per gestire il comportamento dell'interruttore quando attivato

Posso Ignorare Questa Regola?

Nome dell'interruttore ha un impatto critico per gli utenti. Un interruttore senza un nome accessibile non può essere compreso o utilizzato dagli utenti di lettori di schermo. Consigliamo vivamente di risolvere questo problema in tutti i casi. Scopri di più su ignorare le regole.

Risorse

Pagine del Corso Universitario Deque

• 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.0, Raccomandazione W3C - Criterio di Successo 4.1.2 - Nome, Ruolo, Valore
• Documenti di Comprensione WCAG 2.1 - Comprendere 4.1.2 A - Nome, Ruolo, Valore