react Native a11y：对元素进行分组以实现更好的配音公告，同时仍然暴露内部可访问元素

Question

根据我目前的理解，VoiceOver 从左到右、从上到下宣布内容，因为它假设视觉用户是如何看待内容的。

（我还不明白画外音如何准确地计算出顺序，它当然不依赖于渲染的布局树。将不胜感激任何指针）

如果您有跨多行的原子内容，并且希望通过画外音一起宣布，您可以通过在容器视图上添加

accessible={true}

来对其进行分组。问题是，这使得任何内部交互元素都无法获得可访问性焦点，并且只允许 a11y 焦点在此容器视图上。

考虑以下设计：

两张卡片并排显示，每张卡片都有标题、副标题和 cta。 在屏幕阅读器焦点上， 理想情况下，我们希望首先读取第一张卡的内容，并宣布其 CTA，然后移动到第二张卡并执行相同的操作。 默认情况下，画外音最终会播报 title1、title2、subtitle1、subtitle2、cta1、cta2，这对用户来说没有意义。

要解决此问题，一种方法是使容器视图可访问={true}，这有一个副作用，即 CTA 现在不可用于辅助功能焦点，因此屏幕阅读器用户无法到达或单击 CTA。

有什么首选模式可以解决这个问题吗？

编辑：为每张卡添加示例代码：

<View style={...} key={...}>
  <Text>{title}</Text>
  <Text>{subtitle}</Text>
  <Button flat secondary onPress={() => onPress(item)}>
    {cta}
  </Button>   
</View>

Answer 1

有几种方法可以解决这个问题， 最好和最简单的一种是使用

ScrollView

组件。

<ScrollView horizontal>
 <ScrollView scrollEnabled={false}>
   FirstCard
 </ScrollView>
 <ScrollView scrollEnabled={false}>
   SecondCard
 </ScrollView>
</ScrollView>

ScrollView

可以帮助定义方向，而无需安装额外的库。

如果您需要特定的实现，或者

ScrollView

不起作用，您可以尝试这些库：

• https://www.npmjs.com/package/react-native-a11y-order
• https://www.npmjs.com/package/react-native-a11y

Answer 2

查看

UIAccessibilityContainer

，特别是

accessibilityElements

属性。

这些都是 Objective-C 对象并且不是 React，但希望 React 允许你访问它们。

Answer 3

虽然我无法提供答案，但当我正在研究将其添加到我们的项目中时，我已经测试了自己，我想我会将其交给其他人，因为这个要点似乎是您需要的答案：

https://gist.github.com/louy/6b66c45ae47bb4e3bac5a104dd0649ff

它涉及创建一个桥梁来从 JS/TS 端实现 @slugolicious' 答案中的命令。

Answer 4

我找到了一个解决方案并将其呈现在

react-native-a11y-order

。

• https://github.com/ArturKalach/react-native-a11y-order
• https://www.npmjs.com/package/react-native-a11y-order

import { A11y } from 'react-native-a11y-order';

// ...

export default function App() {
  return (
    <ScrollView
      style={styles.slider}
      contentContainerStyle={styles.sliderContainer}
      horizontal
    >
      <A11y.Group style={styles.slide}>
        <View>
          <Text>Title: 1</Text>
        </View>
        <View>
          <Text>Desctiption: 1</Text>
        </View>
      </A11y.Group>
      <A11y.Group style={styles.slide}>
        <View>
          <Text>Title: 2</Text>
        </View>
        <View>
          <Text>Desctiption: 2</Text>
        </View>
      </A11y.Group>
    </ScrollView>
  );