React Native Expo应用VoiceOver模态框无障碍焦点设置问题

核心解决思路 #

直接利用iOS原生无障碍属性+Expo的AccessibilityInfo API实现需求，比自定义钩子更贴合原生无障碍逻辑，避免焦点跳转异常问题。

1. 屏蔽模态框背后内容的访问权限 #

给模态框的根容器View添加accessibilityViewIsModal={true}属性（iOS专属），这个属性会告知VoiceOver：当前模态框是唯一可交互的区域，自动拦截背景内容的焦点访问。

2. 打开模态框时自动聚焦到指定元素 #

模态框渲染完成后，调用AccessibilityInfo.setAccessibilityFocus()，将焦点定向到模态框内的第一个关键元素（比如标题、操作按钮）。

完整代码示例 #

import React, { useEffect, useRef } from 'react';
import { Modal, View, Text, Button, AccessibilityInfo } from 'react-native';

const CustomModal = ({ visible, onClose }) => {
  // 用ref绑定需要聚焦的模态框元素
  const modalFocusTargetRef = useRef(null);

  useEffect(() => {
    if (visible) {
      // 延迟执行确保视图已渲染完成，避免焦点设置失败
      const timer = setTimeout(() => {
        AccessibilityInfo.setAccessibilityFocus(modalFocusTargetRef.current);
      }, 200);
      return () => clearTimeout(timer);
    }
  }, [visible]);

  return (
    <Modal visible={visible} animationType="fade">
      {/* 根容器开启模态无障碍隔离 */}
      <View 
        style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}
        accessibilityViewIsModal={true}
      >
        <View 
          style={{ padding: 24, backgroundColor: 'white', borderRadius: 12 }}
          ref={modalFocusTargetRef}
          accessibilityLabel="操作提示弹窗"
        >
          <Text style={{ fontSize: 18, marginBottom: 16 }}>确认执行此操作？</Text>
          <View style={{ flexDirection: 'row', gap: 12 }}>
            <Button title="取消" onPress={onClose} />
            <Button title="确认" onPress={onClose} />
          </View>
        </View>
      </View>
    </Modal>
  );
};

export default CustomModal;

关键注意事项 #

• accessibilityViewIsModal仅iOS生效，完全适配VoiceOver的场景需求；若需兼容Android，可搭配importantForAccessibility="yes"属性。
• 延迟聚焦是为了确保模态框的原生视图已完成渲染，避免setAccessibilityFocus找不到目标元素。
• 模态框关闭后，VoiceOver会自动回到触发弹窗的原元素，无需额外处理；若需自定义焦点回归，可在关闭回调中再次调用setAccessibilityFocus指向指定元素。
• 务必给模态框内的交互元素设置accessibilityLabel或accessibilityHint，保证VoiceOver能准确朗读内容。

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