React Native A11y：分组元素兼顾VoiceOver播报与内部交互可达性

针对并排双卡片布局下，VoiceOver默认播报顺序混乱，且设置容器accessible={true}会屏蔽内部交互元素的问题，以下是几种可行的解决方案：

方案1：手动指定无障碍元素遍历顺序 #

在包含两个卡片的父容器上，通过accessibilityElements属性强制指定焦点遍历顺序，引导VoiceOver先处理完第一个卡片的所有可访问元素，再切换到第二个卡片。这种方式既能保证逻辑连贯的播报顺序，又能保留每个元素的独立交互性。

示例代码：

import { useRef } from 'react';
import { View, Text, Button } from 'react-native';

const TwoCardLayout = ({ cards, onPress }) => {
  const card1Ref = useRef(null);
  const card2Ref = useRef(null);

  return (
    <View
      style={{ flexDirection: 'row', gap: 16 }}
      accessibilityElements={[card1Ref.current, card2Ref.current]}
    >
      {/* 第一张卡片 */}
      <View ref={card1Ref} style={/* 卡片样式 */} key={cards[0].id}>
        <Text>{cards[0].title}</Text>
        <Text>{cards[0].subtitle}</Text>
        <Button
          flat
          secondary
          onPress={() => onPress(cards[0])}
        >
          {cards[0].cta}
        </Button>
      </View>

      {/* 第二张卡片 */}
      <View ref={card2Ref} style={/* 卡片样式 */} key={cards[1].id}>
        <Text>{cards[1].title}</Text>
        <Text>{cards[1].subtitle}</Text>
        <Button
          flat
          secondary
          onPress={() => onPress(cards[1])}
        >
          {cards[1].cta}
        </Button>
      </View>
    </View>
  );
};

方案2：合并文本播报内容，保留按钮交互 #

如果希望卡片的标题和副标题作为整体被播报，同时按钮仍可独立聚焦交互，可以将文本内容包裹在一个容器中，通过accessibilityLabel合并文本内容，并设置该容器不可聚焦。

示例代码：

<View style={/* 卡片样式 */} key={card.id}>
  <View
    accessible={false}
    accessibilityLabel={`${card.title}，${card.subtitle}`}
  >
    <Text>{card.title}</Text>
    <Text>{card.subtitle}</Text>
  </View>
  <Button
    flat
    secondary
    onPress={() => onPress(card)}
    accessibilityLabel={`${card.cta}，${card.title}`}
  >
    {card.cta}
  </Button>
</View>

这种方式下，VoiceOver会先播报合并后的文本内容，再聚焦到按钮，既保证了内容的整体性，又不影响按钮的交互功能。

方案3：用accessibilityRole标识逻辑分组 #

给每个卡片容器设置accessibilityRole="group"，告诉VoiceOver这是一个逻辑分组的内容，同时不会屏蔽内部元素的焦点。结合父容器的布局设置，可辅助优化播报的逻辑连贯性。

示例代码：

<View
  style={/* 卡片样式 */}
  key={card.id}
  accessibilityRole="group"
>
  <Text>{card.title}</Text>
  <Text>{card.subtitle}</Text>
  <Button
    flat
    secondary
    onPress={() => onPress(card)}
  >
    {card.cta}
  </Button>
</View>

推荐优先级 #

优先选择方案1，它能最精准地控制播报顺序，同时完全保留所有元素的交互能力，最贴合理想的无障碍体验需求。

内容的提问来源于stack exchange，提问作者gaurav5430