1

I'm programming a react native game app for blind kids to help them with maths. There is a game in which they have to count how many animals are in the screen; when an animal is pressed it emits a sound.

In react native there is the onPress property of <TouchableWithouFeedback /> which allows me to play the sound, but when it comes to visually impaired users I have to announce that there is an animal instead of just playing the sound.

How can I know if a certain View is focused by the screen reader and call a function to do that?

3 Answers 3

0

There doesn't seem to be any way to react to the screen reader focusing on a particular object. Instead, you need to use the accessibilityLabel property on each animal object.

<TouchableOpacity accessible={true} accessibilityLabel="This is a tiger">
   ...
</TouchableOpacity>

When the user selects this object with say, a single tap, they will hear "This is a tiger." Then, after double-tapping the screen, they should hear the associated sound that all other users would normally hear.

I don't think there's really much more you can do than this with the given APIs. Not sure if the limitations are at the OS SDK or React Native level.

Check out the React Native docs on Accessibility for further details.

3
  • 1
    I managed to solve this issue by implementing a custom native component for Android which sends an event to React Native when accessibility focus is on the view
    – nicokant
    Jun 13, 2018 at 9:09
  • @nicokant Good to know (for better or for worse) that the limitation lies in the React Native framework. I'm up against a similar situation where I need to listen for the screen reader focus. Is your solution something you're willing and able to share? Can you open source it?
    – Ryan H.
    Jun 13, 2018 at 13:14
  • we are going to open source it in the next months
    – nicokant
    Jun 21, 2018 at 6:49
0

There's no way to detect, currently, if an element has VoiceOver or TalkBack focus. (I doesn't implement UIAccessibilityFocus neither TYPE_VIEW_ACCESSIBILITY_FOCUSED for Android

0

The only way to solve this is by developing a native module for images adding native listeners for accessibility events. This means in Android for example:

    public void installAccessibilityDelegate() {
        setAccessibilityDelegate(new AccessibilityDelegate() {
            @Override
            public boolean onRequestSendAccessibilityEvent(ViewGroup viewGroup, View child, AccessibilityEvent event) {
                if (event.getEventType() == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED) {
                    sendReactNativeEvent("start");
                    return false;
                }

                if (event.getEventType() == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUS_CLEARED) {
                    sendReactNativeEvent("end");
                    return false;
                }

                return super.onRequestSendAccessibilityEvent(viewGroup, child, event);
            }
        });
    }

My group developed a ios/android component which exposes those events for an image which is currently distributed via npm: https://www.npmjs.com/package/react-native-accessible-image

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.