React 本机可访问性状态扩展正在被 Android 的 VoiceView 读出，而不是 iOS 的 VoiceOver

Posted 2023-02-21

【中文标题】React 本机可访问性状态扩展正在被 Android 的 VoiceView 读出，而不是 iOS 的 VoiceOver

【英文标题】：React native accessibilityState expanded is getting read out by Android's VoiceView but not iOS' VoiceOver

【发布时间】：2021-01-12 08:03:10

【问题描述】：

在 React Native 手风琴组件中，我试图为使用辅助设备的用户显示每个手风琴选项的 expanded/closed 状态，例如android 的 VoiceView，ios 的 VoiceOver。

以下内容适用于我的 Android Amazon Fire，但不适用于我的 iPhone 11：

const renderHeader = (section, _, isActive) => 
    // section.title = "How can my health coach help me?"
    return (
        <View
          accessibilityLabel=section.title
          accessibilityState= expanded: isActive  // This is only read out on Android.
          accessibilityRole="button" // Also, this is only read out on Android.
        >
          <View>
            <Text title=section.title />
          </View>
          <Icon
            name=isActive ? "chevron-up" : "chevron-down"
          />
        </View>
    );

我的 Amazon Fire 的 VoiceView 读出：

“我的健康教练如何帮助我？折叠。按钮。双击激活。”（当手风琴处于折叠状态时）

所以accessibilityState 适用于Android :)

我的 iOS 的 VoiceView 刚刚读出：

“我的健康教练如何帮助我？”

这不是我想要的，因为它没有传达选项是一个按钮并且可以折叠/展开的事实，即accessibilityState 不适用于iOS

我的 Accessibility Inspector (iOS) 看不到accessibilityState 或accessibilityRole：

See image

如何让我的 iOS 的 VoiceView 读出展开/关闭状态，并传达手风琴选项是一个按钮的事实，即它是可按下的。

提前谢谢你:)

【参考方案1】：

众所周知，XCode 的 Accessibility Inspector 为开发人员提供的 a11y 测试环境不足。也就是说，如果您使用 VoiceOver 在实际 iPhone 上测试相同的代码，您会发现可访问性状态按预期公布。