CODEWITHSUNDEEP
androidandroid-jetpack-composeaccessibilityandroid-viewtalkback
rohan
rohan

Reputation: 643

How to make children of a view screen-reader optional on Android

I've got a page on android that has a list of carousels. Each carousel has a header. When Talkback is enabled, currently the user has to go from the title of the carousel, navigate over every carousel item, and all their details, before the reader can continue to the next item in the page (in this example, another carousel, but it could be a paragraph, anything)

I want to achieve a page where the screen reader reads the title of the carousel, then provides an option to dive into the children of the carousel, at the behest of the user, or skip to the next top-level item in the page. How can I achieve this?

Here is a photo of what my screen sorta looks like:

enter image description here

Upvotes: 0

Views: 83

Answers (1)

Quintin B
Quintin B

Reputation: 5881

Implementation

You need to use accessibility headings - this is simple syntactic sugar that allows screen reader users to navigate through headings using "reading mode" or "granularities"

// kotlin views
ViewCompat.setAccessibilityHeading(header, true)

// XML
<TextView
    ...
    android:accessibilityHeading="true"
/>

// Compose
modifier = Modifier.semantics { heading() }

Testing

I have linked to my blog on how headings work as "navigational anchor points" for screen reader users (number 4 below) - the gist is this:

  1. Turn on TalkBack
  2. Use the change reading mode gesture (swipe diagonally up then down from left to right, i.e. draw an arrow head) until the screen shows "headings"
  3. Swipe up and down (as opposed to left and right) to "tab" between headings

Some further reading:

  1. Accessibility headings
  2. Accessibility in Jetpack Compose
  3. Accessibility principles
  4. Android Accessibility Headings
  5. Screen reader cheat sheets

Comments

While you absolutely could use something like actions to achieve exactly what you're asking for (to give the user options to skip to headings), you'll also then need to control user focus - this would be a lot of extra work and have to take any race conditions into account. To top it off it's not what TalkBack users actually expect - they're more used to headings than skip actions on mobile.

An additional benefit is that headings can exist in isolation, you don't need to manage relationships between components.

If actions is really what you want give them a try and you can post the code that you tried if you need any additional help.

Upvotes: 1

Related Questions