How to ensure that Voice View reads texts that is not focusable

Vega Open Beta Q&A
1

I have been struggling to find a way for the voice view read texts that is not focusable.

Please note: These texts are not something that describes a focusable content.

example: I would like the voice view to speak the aria-label on image.

<>
<Image

accessible

accessibilityLabel='image'

uri={url}

width={screen.width}

height={screen.height}

style={styles.bgImg}

aria-label='image'
</Image>

<TouchableOpacity>

<Text>This is a text</Text>

</TouchableOpacity>

/>
</>
3

Hi @Rishabh_Ritweek,

Thank you for reaching out about VoiceView accessibility on Vega!

I’ve tested a solution for making non-focusable text and images readable by VoiceView, and I’m happy to share that wrapping non-focusable elements in a TouchableOpacity with activeOpacity={1} works effectively.

The Solution:

For any Text or Image component that you want VoiceView to read but don’t want to be interactive, wrap it in a TouchableOpacity with these properties:

<TouchableOpacity
  activeOpacity={1}
  accessible
  accessibilityLabel="Your descriptive label here"
  aria-label="Your descriptive label here">
  <Text style={styles.text}>Your text content</Text>
</TouchableOpacity>

Example Implementation:

I’ve attached a complete App.tsx (3.7 KB) file demonstrating this pattern with:

  • Header text that VoiceView reads

  • Instructional text at the bottom

  • Images with accessibility labels

I’ve tested this approach on Vega devices with VoiceView enabled and it’s working as expected.
Let me know if you have any questions or need further clarification!

Warm regards,
Aishwarya

4

Hello Aishwarya,

Thank you your response.
I do not think this is the right solution.accessible makes it focusable and then you have to move DPAD around.I would like voice view to read those texts without pressing DPAD.As soon as the page loads, I wanna read specific text or image, without initial focus on that non focusable element.

5

Hi @Rishabh_Ritweek,

Thank you for the clarification! You’re absolutely right - the previous solution makes elements focusable, which requires DPAD navigation.

For VoiceView to automatically announce non-focusable content when a screen loads (without requiring focus), you can use announceForAccessibility:

import { AccessibilityInfo } from 'react-native';

useEffect(() => {
  // Announce text when component mounts
  AccessibilityInfo.announceForAccessibility('Your announcement text here');
}, []);

This will make VoiceView read the text immediately when the page loads, without requiring the element to be focusable or any DPAD navigation.

Let me know if this works for your use case!

Warm regards,
Aishwarya

6

I figured that out.This has a problem, if I am using aria-label property in any element in my react function and its receives focus, there is no guarantee that, AccessibilityInfo’s announcement will be done first. Thanks.

7

I’m the dev from the accessibility team. Thanks @amen for offering options for the 3p developers to explore. But using announcement API is not the optimal solution.@Rishabh_Ritweek For your usecase, you can set accessibility role “header” on the static text/image component. That way makes VoiceView automatically speaks it when the page loads.

Please find the guidance in KeplerScript Accessibility API reference:

Sharon

8

This approach works well for text but not for the aria-label for images

9

Hello @xlgong could you please see my comment above?