我如何在 React Native Accessibility 中制作 TouchableHightLight（复选框）？答案

【问题标题】：How i make TouchableHightLight (checkbox) in React Native Accessibility?我如何在 React Native Accessibility 中制作 TouchableHightLight（复选框）？
【发布时间】：2017-11-22 16:07:16
【问题描述】：

我致力于 ios 应用的可访问性。

我在复选框上使用TouchableHightLight。

我需要 ios 的屏幕阅读器，即 VoiceOver 来知道如何向用户宣布复选框已被选中或未选中。

<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>)

我读到： https://facebook.github.io/react-native/docs/accessibility.html ，但我没有找到任何关于它的信息，或者我错过了一些东西。

我怎样才能做到无障碍？

【问题讨论】：

标签： react-native touch accessibility react-native-ios

【解决方案1】：

    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>

【讨论】：

如果您可以在答案中添加解释，将会很有帮助。

【解决方案2】：

目前 (0.59)，React Native 不支持 switch 或 checkbox 的 accessibilityRole。

但是有一个 PR 开放添加对它的支持。 https://github.com/facebook/react-native/pull/24095

希望它将在 0.60 版中登陆。

【讨论】：