Nome do Interruptor

Qualquer elemento Interruptor deve ter um nome acessível disponível para tecnologias assistivas como TalkBack e Voice Access.

Impacto

Um interruptor deve ter um nome que forneça o contexto e a expectativa do que acontece quando é ligado ou desligado, especialmente para pessoas com baixa visão ou cegueira.

Confirmação

1. Ative o TalkBack
2. Tente focar em um Switch controle
3. Uma das seguintes situações ocorrerá:
   • Inacessível: o TalkBack anuncia apenas 'ligado' ou 'desligado'.
   • Acessível: o TalkBack anuncia o nome do interruptor e 'ligado' ou 'desligado'.

Como Corrigir

XML

Você pode fornecer um rótulo no elemento vizinho ou envolver o interruptor com seu rótulo. Você também pode manipular o contentDescription, mas certifique-se de manter os estados 'ligado' e 'desligado' para os anúncios do 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

No exemplo abaixo, coloque o Texto e o Interruptor juntos em um layout Compose combinado como uma Row. Adicione um papel de interruptor e um modificador alternável ao Texto, depois limpe a semântica no Interruptor usando Modifier.clearAndSetSemantics { } e isso fará o TalkBack focar no rótulo, mas não no interruptor.

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

Para combinar um interruptor e um rótulo no React Native, você pode envolver ambos os componentes dentro de um TouchableOpacity componente:

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

Para garantir que isso funcione bem e forneça todo o contexto necessário para usuários de tecnologia assistiva e não assistiva:

• Certifique-se de que o TouchableOpacity view tenha a propriedade accessible definida como verdadeira, para que o grupo seja focado junto para os usuários de tecnologia assistiva.

• Certifique-se de que a propriedade accessibilityLabel do componente TouchableOpacity seja definida com o mesmo valor exato do rótulo de texto.

• Defina o TouchableOpacity do componente accessibilityRole para switch para fornecer o contexto correto aos usuários de tecnologia assistiva.

• Defina o Switch do componente importantForAccessibility para no-hide-descendants para que o componente não possa ser focado individualmente.

• Adicione uma ação via onPress ao componente TouchableOpacity para lidar com o comportamento do interruptor quando ativado.