Setting a custom content description on composables with no corresponding parameter

Paolo Montalto
2 min readOct 25, 2023

In Jetpack Compose a Composition describes the UI of your app and is produced by running composables. It is a tree-structure that consists of the composables that describe your UI.

Next to the Composition, there’s another three, called the Semantics tree, which describes your UI in a different way that is understandable for Accessibility services.

Thus everyone using Jetpack Compose to define the UI of an Android app has had to deal with contentDescription parameters to improve accessibility of said app and providing a proper description for a given portion of the UI.

However, there are some commonly used composables (say Box or Text for instance) which don’t have a content description parameter.

I came into this while developing my first all compose app, when play console reported an issue with a UI componet not properly labelled for accessibility.
Thus I had to figure out how to set a contentDescription on that composable (it was a Box composable).

So, what should one do when it comes to composables which don’t allow to set a contentDescription in a straightforward way?

The “semantics” modifier, which provides “key = value”-style setters for any Semantics property key, may come in handy.

Suppose you have your Box with its properties and modifiers:

Box (
contentAlignment = Alignment.CenterStart,
modifier = Modifier
.fillMaxWidth()
.background(Color.Red)
)

and you want to add a custom content description for it.

As stated before, since it has not a contentDescription property, a “semantics” modifier can be used as follows

Box (
contentAlignment = Alignment.CenterStart,
modifier = Modifier
.fillMaxWidth()
.background(Color.Red)
.semantics {
this.contentDescription = "Custom content description"
}
)

Hope the above may be of any help for those who struggle to find an answer to this issue.

Your experience and opinions are welcome in the comments.

--

--

Paolo Montalto

Android Engineer, freelance, mobile developer, software craftsman, guitar strummer, husband, father, humble.