CheckBox Naam

Elk CheckBox-element moet een toegankelijke naam hebben die beschikbaar is voor hulpmiddelen zoals TalkBack en Voice Access.

Impact

Mensen die TalkBack gebruiken, worden het meest getroffen door toegankelijkheidsproblemen die door deze regel worden gevonden.

Bevestiging

1. Zet TalkBack aan
2. Probeer de controle te focussen
3. Een van de volgende dingen zal gebeuren:
   • Niet toegankelijk: TalkBack kondigt alleen de waarde en rol aan.
   • Toegankelijk: Zowel de naam als de waarde worden door TalkBack voorgelezen.

Hoe te repareren

XML

Geef een expliciete naam voor de CheckBox controle door gebruik te maken van een TextView en deze te koppelen aan uw CheckBox element.

CheckBox checkBox = .......; // Role: CheckBox
TextView label = .......; // Role: Label
label.setLabelFor(checkBox.getId()); // Associate the Checkbox with its Name

Compose

Omhul de checkbox en tekstcomponent binnen een element met de Checkbox toegankelijkheidsrol en zorg ervoor dat de actie van de controle kan worden uitgevoerd op de bovenliggende component.

Row(modifier = Modifier
    .toggleable(
        value = checkedState,
        enabled = true,
        role = Role.Checkbox,
        onValueChange = { setCheckBoxState(!checkedState) }
    )
    .semantics(mergeDescendants = true) { }
    .constrainAs(labeledTextField) {
        setConstraints(top = parent.top, start = parent.start, end = parent.end)
    }
) {
    Checkbox(
        checked = checkedState,
        modifier = Modifier.padding(16.dp),
        onCheckedChange = null
    )

    Text(text = "Get Marketing emails", modifier = Modifier.padding(16.dp))
}

React Native

Opmerking: de React Native checkboxcomponent is verouderd, dus dit is alleen van toepassing bij het gebruiken van een checkboxcomponent van derden of bij het maken van een aangepaste component.

Om een checkbox en label in React Native te combineren, kunt u beide componenten omhullen binnen een TouchableOpacity component:

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => {
     setSelection(!isSelected)
     }
   }
   accessible={true}
   accessibilityLabel={"Do you like React Native?"}
   accessibilityRole='checkbox'>
     <CheckBox
       importantForAccessibility='no-hide-descendants'
       value={isSelected}
       onValueChange={setSelection}
       style={styles.checkbox}
      />
     <Text>Do you like React Native?</Text>
</TouchableOpacity>

Om ervoor te zorgen dat dit goed werkt en alle nodige context biedt voor zowel hulpmiddelen als niet-hulpmiddelen gebruikers:

• Zorg ervoor dat de TouchableOpacity view de accessible eigenschap op true heeft staan, zodat de groep samen gefocust wordt voor gebruikers van hulpmiddelen.

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

• Stel de TouchableOpacity componenten accessibilityRole in om checkbox de juiste context te bieden aan gebruikers van hulpmiddelen.

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

• Voeg een actie toe via onPress aan de TouchableOpacity component voor het afhandelen van het gedrag van de checkbox wanneer deze geactiveerd wordt.