CheckBox Name

Any CheckBox element should have an accessible name available for assistive technologies such as TalkBack and Voice Access.

Impact

People using TalkBack are impacted most by accessibility issues found by this rule.

Confirmation

1. Turn on TalkBack
2. Attempt to focus the control
3. One of the following will happen:
   • Inaccessible: TalkBack only announces the value and role.
   • Accessible: Both the name and value are read by TalkBack.

How to Fix

XML

Provide an explicit name for the CheckBox control by utilizing a TextView and associating it with your CheckBox element.

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

Compose

Wrap the checkbox and text component inside an element with the Checkbox accessibility role, and ensure the control's action is able to be invoked on the parent 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

Note: the React Native checkbox component has been deprecated, so this will only apply when using a third-party checkbox component, or when creating a custom component.

To combine a checkbox and label in React Native, you can wrap both components within a 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>

To ensure this functions well and provides all necessary context for both assistive technology and non-assistive technology users:

• Ensure the TouchableOpacity view has the accessible property set to true, so that the group is focused together for assistive technology users.

• Ensure the accessibilityLabel property of the TouchableOpacity component is set to the exact same value of the text label.

• Set the TouchableOpacity components accessibilityRole to checkbox to provide the correct context to assistive technology users.

• Set the CheckBox components importantForAccessibility property set to no-hide-descendants so that the component cannot be individually focused.

• Add an action via onPress to the TouchableOpacity component for handling the behavior of the checkbox when activated.