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