Tweet
Tweet

Slide 1

Slide 1 text

Unpacking Compose Multiplatform Accessibility

Slide 2

Slide 2 text

Hey, I’m Colin Marsch Android Engineer @ Cash App

Slide 3

Slide 3 text

What is Compose Multiplatform?

Slide 4

Slide 4 text

How is Compose Multiplatform related to accessibility?

Slide 5

Slide 5 text

Accessibility Features Overview

Slide 6

Slide 6 text

Testing iOS Accessibility

Slide 7

Slide 7 text

iOSMain > MainViewController.kt Testing iOS Accessibility fun MainViewController() = ComposeUIViewController() { App() }

Slide 8

Slide 8 text

iOSMain > MainViewController.kt fun MainViewController() = ComposeUIViewController( con fi gure = { accessibilitySyncOptions = Always() } ) { App() } Testing iOS Accessibility

Slide 9

Slide 9 text

App scoped features

Slide 10

Slide 10 text

Font Scaling

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Cut off text Museum of Art

Slide 13

Slide 13 text

Colour Contrast

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Element scoped features

Slide 16

Slide 16 text

Content Description

Slide 17

Slide 17 text

Image(contentDescription = "A field of sunflowers")

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Merge Descendants

Slide 20

Slide 20 text

Column(Modifier.semantics(mergeDescendants = true) {}) { Image(... contentDescription = "Wave emoji" ...) Text("Hello!") }

Slide 21

Slide 21 text

Column(Modifier.semantics(mergeDescendants = true) {}) { Image(... contentDescription = "Wave emoji" ...) Text("Hello!") }

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Custom Action

Slide 24

Slide 24 text

Text( text = "Compose Multiplatform", modifier = Modifier.semantics { customActions = CustomAccessibilityAction( label = "Activate", action = { /* Activate the text */ } ) }, )

Slide 25

Slide 25 text

Text( text = "Compose Multiplatform", modifier = Modifier.semantics { customActions = CustomAccessibilityAction( label = "Activate", action = { /* Activate the text */ } ) }, )

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Heading

Slide 28

Slide 28 text

Text( text = "Compose Multiplatform", modifier = Modifier.semantics { heading() }, )

Slide 29

Slide 29 text

Text( text = "Compose Multiplatform", modifier = Modifier.semantics { heading() }, )

Slide 30

Slide 30 text

“The Flower Girl, Heading”

Slide 31

Slide 31 text

Role

Slide 32

Slide 32 text

Text( text = "Activate", modifier = Modifier.semantics { role = Role.Button }, )

Slide 33

Slide 33 text

Text( text = "Activate", modifier = Modifier.semantics { role = Role.Button }, )

Slide 34

Slide 34 text

State Description

Slide 35

Slide 35 text

Text( text = "Compose Multiplatform", modifier = Modifier.semantics { stateDescription = "Hidden" }, )

Slide 36

Slide 36 text

Text( text = "Compose Multiplatform", modifier = Modifier.semantics { stateDescription = "Hidden" }, )

Slide 37

Slide 37 text

“Hidden, The Flower Girl”

Slide 38

Slide 38 text

Takeaways

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Thank you! Q&A?