3

As I am developing an App with React Native, I'm trying to make it accessible using VoiceOver/TalkBack.

In my code, I have a boolean value that tracks whether an operation happened or not. Depending on the value of this boolean variable, I show in my view either Text1 or Text2. I want to notify the user when this modification happens.

How can I proceed? I have read the documentation here: https://reactnative.dev/docs/accessibility and don't seem to have a function for that for both iOS/Android.

Richard Wilson
  • 297
  • 4
  • 17
MejorSP
  • 31
  • 1

2 Answers2

0

If you want to notify screen readers about a change, then use a live region, https://reactnative.dev/docs/accessibility#accessibilityliveregion-android, although it looks like that property is just for Android.

Seems like react would have it for both platforms because native iOS supports it via UIAccessibilityPostNotification when you pass it UIAccessibilityAnnouncementNotification.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
0

I know this is a late entry, but maybe it will help others.

You can create a ternary operation that toggles the screen reader accessibility to one or more elements. Of course, iOS and android use different property names, but they perform the same action. Simply adding both properties to the component resolves this.

ios: accessibilityElementsHidden

android: importantForAccessibility

In your component, do something like this:

<Component
  accessibilityElementsHidden={notify === 'Text1' ? false: true}
  importantForAccessibility={notify === 'Text1' ? 'yes' : 'no-hide-descendants'}
  ...
/>

NOTE: The logic for the properties is reversed. For ios, the question is "should the element be hidden?". For android, the question is "should the element be displayed?". This can trip you up if you're not careful. (I know, it caught me when I was writing this LOL).

Mike S.
  • 2,048
  • 1
  • 32
  • 55