Accessibility order Issue

[niralivasoya]

Description:
I’m facing an accessibility issue in my app. I want the screen reader to read the content in a specific logical order. However, it currently reads the content based on its visual coordinates on the screen—starting with the image (which is visually placed on the right side), followed by the text on the left, and then other content.

Current Behavior:
The screen reader reads the elements in the order based on their layout on the screen (right-to-left or top-to-bottom), not the logical reading order I intend. Here in this case it readout the Images (right side slightly up then title) then reads title followed by other content on the tile.

Expected Behavior:
The screen reader should read the content in the logical order I define—first the text, then the image, and then the remaining content—regardless of their visual position on the screen.

Tech Stack:
React
React Native

Request:
Can someone guide me on how to define or separate the views/content in a way that ensures the screen reader follows the intended reading order rather than the visual layout? Any advice or best practices for improving accessibility in this scenario would be greatly appreciated.

[liamjones]

I know https://github.com/ArturKalach/react-native-a11y-order exists to control the focus order manually, but I've not had a chance to try it out myself yet.

Edit: also see discussion #389 if you've not found it already.

[niralivasoya]

Hi @liamjones, thanks for your reply. In my case, the screen reader is reading the content based on coordinates — for example, the images on the right side are being read before the title. So the screen reader reads them first as it tops the tile, followed by the title and other content.

I tried using shouldGroupAccessibilityChildren, but it didn’t work as expected. It’s still reading the content in a random order based on the Y/X coordinates on the screen.

Any solution for this or any ideas would be appreciated.

[niralivasoya]

In general, I want the screen reader to read the entire tile content as a group, without placing focus on individual elements — only the button should be focusable, while the rest of the content within the tile should remain non-focusable.

[NickGerleman]

@joevilches is currently working on a built in API for this.