Schakelaarnaam

Elk schakelelement moet een toegankelijke naam hebben die beschikbaar is voor ondersteunende technologieën zoals TalkBack en Voice Access.

Impact

Een schakelaar moet een naam hebben die de context en verwachting van wat er gebeurt als deze wordt in- of uitgeschakeld, vooral voor mensen met slechtziendheid of blindheid, weergeeft.

Bevestiging

1. Zet TalkBack aan
2. Probeer je te richten op een Switch bedieningselement
3. Een van de volgende dingen zal gebeuren:
   • Ontoegankelijk: TalkBack kondigt alleen 'aan' of 'uit' aan.
   • Toegankelijk: TalkBack kondigt de naam van de schakelaar aan en 'aan' of 'uit'.

Hoe te repareren

XML

U kunt een label in het aangrenzende element plaatsen of de schakelaar met zijn label omwikkelen. U kunt ook de contentDescriptionmanipuleren, maar zorg ervoor dat u de 'aan' en 'uit' status behoudt voor TalkBack-aankondigingen.

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

In het onderstaande voorbeeld, plaats de Tekst en Schakelaar samen in een samengevoegde Compose-indeling zoals een Rij. Voeg een schakelrol en omschakelbare modifier toe aan de Tekst, en wis dan de semantiek op de Schakelaar door te gebruiken Modifier.clearAndSetSemantics { } en TalkBack zal zich richten op het label, maar niet op de schakelaar.

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

Om een schakelaar en label in React Native te combineren, kunt u beide componenten omwikkelen in een TouchableOpacity component:

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

Om ervoor te zorgen dat dit goed werkt en alle benodigde context biedt voor zowel gebruikers van ondersteunende technologie als gebruikers zonder ondersteunende technologie:

• Zorg ervoor dat de TouchableOpacity weergave de accessible eigenschap op true heeft ingesteld, zodat de groep samen wordt gefocust voor gebruikers van ondersteunende technologie.

• Zorg ervoor dat de accessibilityLabel eigenschap van de TouchableOpacity component is ingesteld op exact dezelfde waarde als het tekstlabel.

• Stel de TouchableOpacity eigenschap van de accessibilityRole in op switch om de juiste context te bieden aan gebruikers van ondersteunende technologie.

• Stel de Switch eigenschap van de importantForAccessibility component in op no-hide-descendants zodat de component niet individueel kan worden gefocust.

• Voeg een actie toe via onPress aan de TouchableOpacity component om het gedrag van de schakelaar bij activering te beheren.