I don’t know much about accessibility, screen read...

# compose

[orangy]

I don’t know much about accessibility, screen readers and related matter, but I wonder what is the proper way to make a checkbox with text accessible? Material component has Checkbox but it doesn’t have a label. Of course, I can make a Row with checkbox and text, but they won’t be semantically connected (and I need special handling for label tap to toggle checkbox). What is the proper way of making labeled checkbox with accessibility in mind?

[orangy]

@jim do you know if there is an accessibility guide somewhere?

[jim]

Accessibility is generally controlled via Semantics. You can learn more about semantics properties as they relate to accessibility here: https://developer.android.com/jetpack/compose/accessibility

For checkbox in particular and not sure if this is the latest recommendation for checkbox, but in general I think you can use mergeDescendants to make descendants become semantically connected as described by @Bryan Herbst in his compose-semantics-talkback blog post:

A very common desire is to group multiple elements on screen together and have TalkBack read them as one element. For example if you have a Checkbox with a Text, you probably want to have both the state of the Checkbox and the text grouped together for accessibility purposes. mergeDescendants enables that grouping! In the android.view world it is common to do this using android:importantForAccessibility on a ViewGroup.

Here’s a concrete example with a Checkbox:

Row(

Modifier.semantics(mergeDescendants = true) {}

) {

Checkbox(checked = true, onCheckedChange = {})

Text("Item one")

}

This will create a Row that is focusable for accessibility, and when it receives focus TalkBack will read “Checked, Item one”.

[jim]

cc @Ryan Mentley

[Bryan Herbst]

Yep, mergeAllDescendants is what you want!

The one caveat (and I need to update my post to reflect this) is that you want to set onCheckedChange on your Checkbox() to null. If you have a non-null checked change listener then TalkBack will still be able to focus the row and the checkbox separately.

More details here: https://issuetracker.google.com/issues/193414941

[Bryan Herbst]

(also, mergeAllDescendants changed to just mergeDescendants after I made that post, sorry I’m a bit behind on updating that)

[orangy]

Thanks a lot!

[Alexandre Elias [G]]

RadioGroupSample illustrates how to do this accessibly (same pattern applies to Checkbox and Switch). Note that clickable, selectable and toggleable modifiers all contain mergeDescendants in their implementation so it is rarely need for non-library code to specify mergeDescendants explicitly