Accessibility in Jetpack Compose: Building Inclusive Android Apps

Part of the series "Android Development Series by Mircea Ioan Soit"

Accessibility is a critical aspect of modern app development, ensuring that apps are usable by everyone, including people with disabilities. Jetpack Compose introduces powerful tools to make accessibility implementation intuitive and effective. In this article, we’ll explore how to design inclusive apps using Compose.

1. Why Accessibility Matters

Creating accessible apps ensures that:

• You cater to a broader audience.
• Your app complies with legal standards like the Americans with Disabilities Act (ADA) or WCAG guidelines.
• You provide a better user experience for everyone, including users with temporary disabilities like an injured hand.

2. Accessibility Features in Jetpack Compose

Compose simplifies accessibility with built-in APIs and tooling. It supports:

• Screen readers like TalkBack.
• Custom content descriptions for non-text elements.
• Focus traversal for keyboard and d-pad navigation.
• Custom actions for better interaction.

3. Implementing Accessibility in Compose

a. Adding Content Descriptions

Content descriptions are vital for non-text UI elements. Use the contentDescription parameter for accessibility labels.

Image(
    painter = painterResource(R.drawable.ic_example),
    contentDescription = "Icon representing an example feature",
    modifier = Modifier.size(48.dp)
)        

If the content is purely decorative, set the description to null to avoid cluttering the screen reader.

Image(
    painter = painterResource(R.drawable.ic_decorative),
    contentDescription = null, // Decorative image
    modifier = Modifier.size(48.dp)
)        

b. Using Semantics for Custom Accessibility

For advanced accessibility, leverage the Modifier.semantics API.

Text(
    text = "50%",
    modifier = Modifier.semantics {
        this.contentDescription = "Progress is 50 percent"
    }
)        

Semantics allow you to override or enhance how a component is interpreted by accessibility tools.

c. Handling Focusable Components

Compose manages focus traversal automatically, but you can customize it using Modifier.focusable().

Button(
    onClick = { /* Do something */ },
    modifier = Modifier.focusable()
) {
    Text("Click Me")
}        

For keyboard and d-pad navigation, use Modifier.focusOrder to specify focus order explicitly.

d. Custom Actions

Add custom actions to describe non-standard interactions.

Box(
    modifier = Modifier.semantics {
        onClick(label = "Refresh content") {
            // Perform custom action
            true
        }
    }
) {
    Text("Pull to Refresh")
}        

4. Testing Accessibility

Compose offers tools for testing accessibility:

• Accessibility Scanner: Use the Android Accessibility Scanner to evaluate your app and identify potential issues.
• Compose Semantics Testing: Test accessibility properties in your Compose UI tests.

Example:

composeTestRule.onNodeWithContentDescription("Icon representing an example feature")
    .assertIsDisplayed()        

5. Design Tips for Accessible Apps

• Ensure Text Readability: Use sufficient contrast and scalable text.
• Support Multiple Input Methods: Include support for touch, keyboard, and voice navigation.
• Avoid Reliance on Color: Use labels or patterns in addition to color for conveying information.
• Test with Screen Readers: Regularly test your app using tools like TalkBack or VoiceOver.

6. Common Accessibility Scenarios

• Dynamic Lists: Ensure scrollable lists are readable by screen readers and offer clear descriptions.
• Interactive Elements: Provide meaningful labels for buttons, sliders, and other controls.
• Live Regions: Announce dynamic updates like notifications using Modifier.liveRegion.

7. Compose Accessibility in Action

Example: Accessible Form

Column {
    TextField(
        value = username,
        onValueChange = { username = it },
        label = { Text("Username") },
        modifier = Modifier.semantics {
            this.contentDescription = "Enter your username"
        }
    )
    Button(onClick = { submitForm() }) {
        Text("Submit")
    }
}        

This form includes accessible labels and descriptions, ensuring it works well with screen readers.

8. Conclusion

Jetpack Compose’s accessibility APIs make it easier than ever to build inclusive apps. By incorporating these tools into your development workflow, you ensure your app is not just functional but also welcoming to all users.