Search code examples
androidiosreact-nativescreen-readers

Is there any way to "hide" a View to Screen Readers, like "aria-hidden" does in HTML?

I need that the Screen Readers like VoiceOver don't recognize (or don't "read") this <View>.

For example, let us suppose that we have a simple App with this template code: <View><Text>Events</Text></View>.

When I run this App, I can see "Events" on the screen. Then if I enable VoiceOver, he says : "Events". Well, I want that he cannot say "Events". In other words, I want that he cannot read this Events. Just like "aria-hidden" does in HTML.

Is it possible?

Solution

  • You can hide a view along with its descendants from screen readers in React Native. The property for that is platform dependent.

    accessibilityElementsHidden (iOS)

    A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden. For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".

    importantForAccessibility (Android)

    In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

    For example:

    <View
  accessibilityElementsHidden={true}
  importantForAccessibility="no-hide-descendants"
>
    <Text>This text won't be read by the screen reader</Text>
</View>

    Here is the source for more details on Accessibility: React Native - Accessibility