For this demo, we will explore adding screen reader support for TalkBack.
- Open settings
- Navigate to Accessibility > Settings > TalkBack > Settings > Advanced settings > Developer settings
- Enable “Display speech output”
- Navigate back and turn on TalkBack
- TURN DOWN YOUR VOLUME!!!
- Slide left and right for next / previous item
- Double click to click selection
- Long press to move selection
- Two fingers for dragging / gestures
Try building and launching the project on your phone, and navigate around with TalkBack. It should have "ok" support for screen readers out of the box, but has several flaws that we can fix.
The actor image does not have a content description, and instead has a default description of "Unlabelled, Image".
Add a content description using R.string.actor_image
We have two buttons, one "Cheer" button that's using the Button composable, and a "Boo" button constructed manually using Box and Modifier.clickable.
These two behave differently with a screen reader. The "Cheer" button is recognized semantically as a button but the "Boo" button is not.
Try adding the Role.Button semantics on the "Boo" button using Modifier.semantics { role = Role.Button }
In the movie role row, each sub-element is navigated individually.
Try merging the elements in the row using Modifier.semantics (mergeDescendants = true) {}
The favorite button has a default description of "Unlabelled, Image".
Change Modifier.clickable to Modifier.toggleable
Add a Modifier.semantics with a stateDescription of R.string.liked or R.string.not_liked depending on the state.
Also add a role of Role.Switch to get switch semantics
Each list item is navigated individually, but we can add semantics to navigate them as list items in a list.
In the parent column, add a Modifier.semantics with collectionInfo = CollectionInfo(columnCount = movieRoles.size, rowCount = 1) to add list semantics.
For each list item, pass down a Modifier.semantics with collectionItemInfo to the list item composable with the corresponding columnIndex in the list (the rest of the properties can be left as 1)