Nome dell'interruttore

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

Impatto

Un interruttore dovrebbe avere un nome che fornisca il contesto e le aspettative su cosa accade quando viene acceso o spento, soprattutto per le persone ipovedenti o cieche.

Conferma

1. Attiva TalkBack
2. Cercare di concentrarsi su un controllo Switch
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: TalkBack pronuncia solo "on" o "off".
   • Accessibile: TalkBack pronuncia il nome dell'interruttore e "on" o "off".

Come risolvere

XML

È possibile specificare un'etichetta nell'elemento adiacente oppure racchiudere l'interruttore con la sua etichetta. Puoi anche manipolare contentDescription, ma assicurati di mantenere lo stato "on" e "off" per gli annunci 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

Nell'esempio seguente, unisci Testo e Interruttore in un layout Compose unito, come una Riga. Aggiungi un ruolo switch e un modificatore attivabile/disattivabile al testo, quindi cancella la semantica sullo switch utilizzando Modifier.clearAndSetSemantics { } un metodo specifico e Talkback si concentrerà sull'etichetta ma non sullo switch.

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 uno switch e un'etichetta in React Native, puoi racchiudere entrambi i componenti all'interno di un TouchableOpacity componente specifico.

<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 funzioni correttamente e fornisca tutto il contesto necessario sia per gli utenti di tecnologie assistive che per quelli non assistive:

• Assicurarsi che TouchableOpacity la proprietà della accessible vista sia impostata su true, in modo che il gruppo sia concentrato insieme sugli utenti di tecnologie assistive.

• Assicurarsi che accessibilityLabel la proprietà del TouchableOpacity componente sia impostata esattamente sullo stesso valore dell'etichetta di testo.

• Impostare il TouchableOpacity componente accessibilityRole specifico su switch un valore specifico per fornire il contesto corretto agli utenti di tecnologie assistive.

• Impostare la Switch proprietà del componente importantForAccessibility specifico su no-hide-descendants un valore specifico in modo che il componente non possa essere messo a fuoco individualmente.

• Aggiungere un'azione tramite onPress al componente TouchableOpacity per gestire il comportamento dell'interruttore quando attivato.