Android Worldwide July 2024: Unpacking Compose Multiplatform Accessibility

In this talk, we will provide a comprehensive overview of the current state of accessibility in Compose Multiplatform. As an emerging UI framework in multiplatform development, understanding its accessibility features is critical for developers.

Transcript

1. Unpacking Compose Multiplatform Accessibility
2. Hey, I’m Colin Marsch Android Engineer @ Cash App
3. What is Compose Multiplatform?
4. How is Compose Multiplatform related to accessibility?
5. Accessibility Features Overview
6. Testing iOS Accessibility
7. iOSMain > MainViewController.kt Testing iOS Accessibility fun MainViewController() = ComposeUIViewController() { App() }
8. iOSMain > MainViewController.kt fun MainViewController() = ComposeUIViewController( con fi gure = { accessibilitySyncOptions = Always() } ) { App() } Testing iOS Accessibility
9. App scoped features
10. Font Scaling
12. Cut off text Museum of Art
13. Colour Contrast
15. Element scoped features
16. Content Description
17. Image(contentDescription = "A field of sunflowers")
19. Merge Descendants
20. Column(Modifier.semantics(mergeDescendants = true) {}) { Image(... contentDescription = "Wave emoji" ...) Text("Hello!") }
21. Column(Modifier.semantics(mergeDescendants = true) {}) { Image(... contentDescription = "Wave emoji" ...) Text("Hello!") }
23. Custom Action
24. Text( text = "Compose Multiplatform", modifier = Modifier.semantics { customActions = CustomAccessibilityAction( label = "Activate", action = { /* Activate the text */ } ) }, )
25. Text( text = "Compose Multiplatform", modifier = Modifier.semantics { customActions = CustomAccessibilityAction( label = "Activate", action = { /* Activate the text */ } ) }, )
27. Heading
28. Text( text = "Compose Multiplatform", modifier = Modifier.semantics { heading() }, )
29. Text( text = "Compose Multiplatform", modifier = Modifier.semantics { heading() }, )
30. “The Flower Girl, Heading”
31. Role
32. Text( text = "Activate", modifier = Modifier.semantics { role = Role.Button }, )
33. Text( text = "Activate", modifier = Modifier.semantics { role = Role.Button }, )
34. State Description
35. Text( text = "Compose Multiplatform", modifier = Modifier.semantics { stateDescription = "Hidden" }, )
36. Text( text = "Compose Multiplatform", modifier = Modifier.semantics { stateDescription = "Hidden" }, )
37. “Hidden, The Flower Girl”
38. Takeaways
39. Takeaways • Android Compose UI accessibility == Compose Multiplatform accessibility • iOS accessibility support is still in the early stages of development • There are some known bugs on iOS (i.e. focus order) • Ensure you test on both mobile platforms
40. Thank you! Q&A?