(upbeat music)
- [Jolanda] In this video,
I'm going to show you how to add accessibility features
to your Compose app.
With a small amount of work,
you can increase your app's reach and versatility.
Using Jetpack Compose,
a lot of accessibility features work out of the box,
but in some cases, you'll have to do manual work.
Let me walk you through some of those situations.
We will use the Jetnews sample as a playground area
and TalkBack as the accessibility service to test with.
Let's start by enabling TalkBack
and see how the app behaves
when we haven't done any custom accessibility work.
- [TalkBack] Top stories for you, Jetnews.
"Locale changes and the AndroidViewModel antipattern,"
Jose Alcerreca, April 2nd, one-minute read.
Double tap to activate.
"A Little Thing about Android Module Paths,"
Pietro Maggi, one-minute read.
"A Little Thing about Android Module Paths."
- [Jolanda] As you can hear,
TalkBack does quite a good job interacting with the app
without us needing to make any changes.
It reads out the information on the screen,
highlights different parts and responds to user interaction.
Now let's see in which ways we can improve the experience.
We will discuss three improvements:
labeling visual elements,
merging multiple composables,
and adding actions to lists.
Let's first look at our app's visual elements.
In Jetnews, you can see multiple icons:
a hero image and an avatar.
Without adding some semantic meaning to those elements,
accessibility services will not know what to do.
Let's see that in action.
- [TalkBack] Button, double tap to activate.
Button, double tap to activate.
(beeping)
- [Jolanda] The icon buttons only pronounce button.
The hero image and the avatar are not focusable at all.
To fix this, we have to add a content description
to these elements.
Let's add a content description
for the heart icon in the bottom bar.
Make sure to use a localized string resource here
as we want our users to hear it in their own language.
When we now are in the app,
TalkBack correctly labels the actions linked to this icon.
- [TalkBack] Add to favorites button.
Double tap to activate.
- [Jolanda] For each visual in your app,
decide whether you want to define a content description.
If the visual is purely decorative,
you should set the content description to no.
Next up, we will look at merging composables.
Often, the system handles this for us.
For example, contents of a list item
or any clickable container have their contents merged,
so accessibility services regard them as one element.
In some cases, we can manually merge composables
to improve the selection behavior
of the accessibility service.
In our sample,
the avatar, author, and metadata of the article
are regarded as separate elements
and are selected separately.
- [TalkBack] Pietro Maggi,
August 2nd, one-minute read.
- [Jolanda] Let's open the class
where these composables are being made.
To merge them, we'll add a semantics modifier
to their parent container
and specify merge descendants as true.
Now, when we select the container,
the elements are read all at once.
- [TalkBack] Pietro Maggi, August 2nd, one-minute read.
- [Jolanda] Finally, let's look at adding custom actions
to list items.
In the home of our app, each article separately selects
the list item and the bookmark icon.
- [TalkBack] "A Little Thing about Android Mod-,"
unchecked check box,
"Dagger in Kotlin: Gotchas and Optimization,"
unchecked check box,
double tap to toggle.
- [Jolanda] This is not going to scale well.
When we add more and more actions to the list item,
TalkBack users will have to swipe a lot
to go through each action.
To improve this,
we can add a custom action to the list item.
This is done in three steps.
First, we define the name of the action
based on the current status.
Next, we add semantics modifier
and set the custom actions property.
Finally, we clear any semantics
on the bookmark button itself
so it will not gain focus anymore.
Let's run this code.
- [TalkBack] "A Little Thing about Android Module Paths,"
Pietro Maggi, one-minute read.
"Dagger in Kotlin: Gotchas and Optimizations,"
Manuel Vivo, three-minutes read.
Double tap to activate actions available.
Use swipe up then right to view.
Alert: Local Context Menu.
"Actions" in list.
Alert: Actions.
"Add to bookmarks" in list.
Double tap to activate.
- [Jolanda] That was an overview
of the Jetpack Compose accessibility APIs.
To learn more about Jetpack Compose,
check out the pathway linked in the description below.
Thanks for watching.
(upbeat music)