Nombre del interruptor

Cualquier elemento Switch debe tener un nombre accesible disponible para tecnologías de asistencia como TalkBack y Voice Access.

Impacto

Un interruptor debe tener un nombre que proporcione el contexto y la expectativa de lo que sucede cuando se enciende o se apaga, especialmente para personas con baja visión o ceguera.

Confirmación

1. Activar TalkBack
2. Intente centrarse en un Switch control
3. Ocurrirá uno de los siguientes casos:
   • Inaccesible: TalkBack solo anuncia 'activado' o 'desactivado'.
   • Accesible: TalkBack anuncia el nombre del interruptor y si está encendido o apagado.

Cómo solucionarlo

XML

Puede proporcionar una etiqueta en el elemento vecino o envolver el interruptor con su etiqueta. También puede manipular el contentDescription, pero asegúrese de mantener el estado "activado" y "desactivado" para los anuncios de 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

En el siguiente ejemplo, coloque el Texto y el Interruptor juntos en un diseño de Composición fusionado como una Fila. Agregue un rol de interruptor y un modificador conmutador al Texto, luego elimine la semántica en el Interruptor usando Modifier.clearAndSetSemantics { } y hará que Talkback se enfoque en la etiqueta pero no en el 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 un interruptor y una etiqueta en React Native, puedes envolver ambos componentes dentro de un 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 garantizar que esto funcione bien y proporcione todo el contexto necesario tanto para los usuarios de tecnología de asistencia como para los usuarios de tecnología no asistencial:

• Asegúrese de que la TouchableOpacity vista tenga la accessible propiedad establecida en verdadera, de modo que el grupo esté enfocado en conjunto para los usuarios de tecnología de asistencia.

• Asegúrese de que la accessibilityLabel propiedad del TouchableOpacity componente esté establecida exactamente en el mismo valor de la etiqueta de texto.

• Establezca el componente TouchableOpacity accessibilityRole en switch para proporcionar el contexto correcto a los usuarios de tecnología de asistencia.

• Establezca la propiedad del componente en Switch importantForAccessibility para que el componente no pueda tener foco individualmente. no-hide-descendants

• Agregue una acción al componente onPress vía TouchableOpacity para manejar el comportamiento del interruptor cuando se activa.