Jetpack Compose Accessibility: Getting Started

Adding Action Labels

You can still provide more information. One thing you can do is let the consumer know what will happen when they perform an action.

The clickable modifier has a handy parameter to share this information. To start, add the following descriptions before clickableModifier:

val selectActionDescription =
  stringResource(R.string.description_action_order)
val unselectActionDescription =
  stringResource(R.string.description_action_remove_order)

Now, you can use these descriptions. Add the onClickLabel parameter to the clickable modifier you added before:

onClickLabel = if (dish.selected) {
  unselectActionDescription
} else {
  selectActionDescription
}

When the dish is selected, the action will unselect it, and vice versa.

Build and run the app to see this in practice. TalkBack will now read “Double-tap to Order”.

Using Foundational Modifiers

This app is a million times better than when you started. Good work! However, it kinda took a lot of little steps, especially when handling specific actions. There’s an easier way to do this.

Google encourages you to use foundational modifiers when building custom views. Why’s that? They do a lot of the work you just did for you, so you don’t have to try to remember it all.

Some of these modifiers include triStateToggleable and selectable. The selectable one is perfect for this app.

In MenuItem.kt, delete clickable and add selectable:

val clickableModifier = Modifier.selectable(
  selected = dish.selected,
  onClick = { onDishSelected(dish) }
)

This keeps track of the selected state for you, so you don’t need to do it yourself in the semantics modifier. It also sets it as selectable.

Run your selectable tests, and make sure they still pass.

Build and run the app to observe similar selectable behavior.

When building a component, it’s helpful to look at the range of modifiers to help you find shortcuts like this one. You can also peek at how Material and foundational components are built. This makes it less likely for you to forget something while also making your app more accessible!

Understanding Touch Targets

While this app currently has no infractions, a discussion on accessible action handling would be incomplete without discussing touch targets.

It’s recommended that any intractable item should be at least 48×48 dp. This ensures it’s big enough to tap for someone who’s visually impaired, has shaky hands or is on a bumpy bus ride. Because Compose is accessibility forward, with Material components and some modifiers, this is often enforced, but not always. It’s worth watching out for on your own.

You can test this in automated tests using assertTouchHeightIsEqualTo and assertTouchWidthIsEqualTo. You can also test manually using the Accessibility Scanner.

To solve a too-small item, you can:

• Make the element bigger.
• Add some padding.
• Use the touchBoundsInRoot modifier to update the touch area.

Testing Comprehensively

While this tutorial showed two ways to test your app for accessibility — automated tests and TalkBack — it only scratches the surface when it comes to testing. People use other accessibility tools, and automated testing doesn’t catch everything.

Try changing your display size or updating the color correction. Test your app in a variety of scenarios.

When you feel you have the basics down, there’s no replacement for user testing. Watch people who use accessibility services every day use your app. It’s a promise you’ll get insights you never would otherwise.

Where to Go From Here

Great job! You’ve learned a lot here, today. You can check out the final project using the Download Materials button at the top or bottom of this tutorial.

If you want to dig deeper into accessibility on Android, check out Android Accessibility by Tutorials.

If you want more information about accessibility in Jetpack Compose, you can look at the official documentation:

• Accessibility in Jetpack Compose
• Jetpack Compose semantics
• Jetpack Compose accessibility codelab

Please join the comments below with any questions or thoughts!