How i make TouchableHightLight (checkbox) in React Native Accessibility?

user_5740092 0
Viewed 893

I work on accessibility for an ios app.

I use TouchableHightLight on checkboxes.

I need the screen reader of ios, the VoiceOver to know how to announced to the user if a checkbox has been checked or unchecked.

<View style={styles.rememberMeContainer}>
    <TouchableHighlight
        underlayColor="transparent"
        accessibilityLabel={props.rememberMeText}
        accessible={true}
        style={styles.rememberMeCheckBox}
        onPress={() => {props.setRememberMe(!props.rememberMe)}}>
        <Image style={styles.checkBoxImage}
               source={props.rememberMe ?
                    require("../../../images/general/v_icon_purple.png") : null}/>
    </TouchableHighlight>
    <Text accessible={false} style={styles.rememberMeCheckBoxlabelStyle}>
        {props.rememberMeText}
    </Text>
</View>)

I read: https://facebook.github.io/react-native/docs/accessibility.html , but i don't find anything about it, or I missed something.

How can I do it accessible?

react-native-ios react-native touch accessibility
2 Answers

    accessible={true}
    style={styles.rememberMeCheckBox}
    onPress={() => {props.setRememberMe(!props.rememberMe)}}>
    <Image style={styles.checkBoxImage}
           source={props.rememberMe ?
                require("../../../images/general/icon_unchecked.png") :  require("../../../images/general/icon_checked.png")}/>
</TouchableHighlight>
user_76528120
user_13944140
Related