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
- Turn on TalkBack
- Attempt to focus on a
Switch
control - 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 toggleable 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 { }
)
}