• Some Material components set these sizes for you 🎉

Rather than doing it by ourselves, we can use IconButton composable that has a minimum touch target size of 48 x 48dp to meet the accessibility guidelines.

https://developer.android.com/codelabs/jetpack-compose-accessibility/img/6dbe0b3c0ee055e0.png?authuser=4

• As you can see on the left close button’s size was 24 dp, and after fix it is 48 dp which is required.

Click labels

• Clickable elements by default don’t provide any information on what clicking that element will do. Therefore, accessibility services like TalkBack will use a very generic default description.
• We can provide a specific description that explains what will happen when the user clicks this element which helps to provide the best experience for users with accessibility needs.

• As you can see that on the left side talkback just says Double-tap to activate , after improvement on the right side, it says Double-tap to read article.

You just need to provide the label do not add Double-tap to to your label, talkback will handle it for you based on the event (click, longClick)

Custom actions

• With the help of the custom accessibility actions, we can group together actions that relate to the same list item.
• We can pass the list of CustomAccessibilityAction’s to customActions semantic property

On the left, you can see the default situation, where each cross icon is focusable. On the right, you can see the solution, where the action is included in the custom actions in TalkBack:

Headings

• We can indicate which parts of the text are headings which helps users to navigate quickly through different headings by swiping up or down ⬆️ ⬇️.
• We can set the heading semantics property to indicate that this composable is a heading.

Custom Navigation

Focus Modifiers helps us to customize the navigation between different composables

We can interact with the focus mechanisms in Compose with the help of the following modifiers.

• Modifier.focusTarget(): Allows making the component focusable

Text(
    text = "Hello World",
    modifier = Modifier.focusTarget()
)

• Modifier.focusOrder(): In combination with FocusRequesters, this allows us to change the focus order

val (first, second) = FocusRequester.createRefs()
You can also pass lambda to customize the focus events behaviour
Text(
    text = "Hello World",
    modifier = Modifier
        .focusOrder(first) {
            this.down = second
        // down, left, right, up, previous, next, start, end
        }
)

• Modifier.focusRequester(): By adding a custom FocusRequester it allows us to request focus for individual components

val (first, second) = FocusRequester.createRefs()
Text(
    text = "FocusRequester",
    modifier = Modifier
        .focusRequester(second)
)
// requestFocus 
second.requestFocus()

• Modifier.onFocusEvent(), Modifier.onFocusChanged():Allows us to observe the changes to focus state

Modifier.onFocusChanged { focusState ->
    with(focusState) {
        when {
            hasFocus -> {
                Log.d("A child of mine has focus!")
            }
            isFocused -> {
                Log.d("I'm focused!")
            }
        }
    }
}