Switch Name

Switch must be paired with a label indicating its purpose.

Supported within:

Impact

A switch should have a name that provides the context and expectation of what happens when it is turned on or off, especially for people with low-vision or blindness.

Confirmation

1. Turn on TalkBack
2. Attempt to focus on a Switch control
3. One of the following will occur:
   • Inaccessible: TalkBack only announces 'on' or 'off'.
   • Accessible: TalkBack announces the name of the switch and 'on' or 'off'.

How to Fix

In the example below, put the Text and Switch together into a merged Compose layout like a Row. Add a Switch role and Toggable modifier to the Text, then clear the semantics on the Switch by using Modifier.clearAndSetSemantics { } and it will make Talkback focus on the label but not the switch.

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