React Native Bottom Sheet 在 iOS 上的屏幕阅读器无障碍问题解析

问题现象

React Native Bottom Sheet 是一个流行的底部弹窗组件库，但在 iOS 平台上存在一个显著的无障碍访问问题。当使用 VoiceOver（iOS 的屏幕阅读器）时，用户无法正常访问 Bottom Sheet 弹窗内的内容。这个问题在 v4 和 v5 版本中都存在。

问题根源

经过开发者社区的调查和分析，问题主要源于以下几个技术点：

1. 默认无障碍属性设置不当：Bottom Sheet 组件默认设置了 accessible={true} 和 accessibilityRole="adjustable" 属性，这导致屏幕阅读器将整个 Bottom Sheet 视为一个单一的可调整元素，而不是识别其中的具体内容。

2. 背景层干扰：背景组件也设置了不必要的无障碍属性，进一步干扰了屏幕阅读器的正常行为。

3. 指针事件处理：背景容器的指针事件设置可能影响了触摸事件的正常传递。

解决方案

目前社区提供了几种有效的解决方案：

临时修复方案

1. 显式设置 accessible 属性： 在 BottomSheet 组件上直接设置 accessible={false} 可以解决大部分问题，使屏幕阅读器能够正常访问内容区域。

2. 手动修改组件源码： 对于更彻底的修复，可以修改以下关键点：

   • 将默认的 DEFAULT_ACCESSIBLE 改为 false
   • 移除背景组件的无障碍属性
   • 调整背景容器的指针事件设置

长期建议

虽然临时方案可以解决问题，但从长远来看，建议库作者考虑以下改进方向：

1. 智能无障碍检测：组件应自动检测系统是否启用了屏幕阅读器，并相应调整无障碍属性。

2. 分层无障碍处理：

   • 容器层：保持基本导航功能
   • 内容层：确保内容可访问
   • 手柄层：提供明确的操作提示

3. 滚动区域优化：特别处理包含 ScrollView 的情况，确保滚动操作不会被无障碍属性阻断。

技术实现细节

对于需要深度定制的开发者，可以关注以下实现要点：

1. 属性继承机制：Bottom Sheet 的无障碍属性应该合理继承和覆盖，避免硬编码。

2. 角色分配策略：不同部分的组件应有明确的角色分配（如容器、内容、手柄等）。

3. 事件传递链：确保触摸事件和屏幕阅读器焦点能够正确传递到内容区域。

总结

React Native Bottom Sheet 在 iOS 上的无障碍问题主要源于过于激进的无障碍属性设置。通过合理调整这些属性，特别是将容器层的 accessible 设为 false，可以恢复屏幕阅读器的正常功能。这个问题也提醒我们在设计可访问组件时，需要仔细考虑不同层级元素的无障碍属性分配，确保既能提供必要的无障碍信息，又不会阻碍用户访问具体内容。

对于重度依赖无障碍功能的应用程序，建议密切关注该问题的官方修复进展，或考虑使用文中提到的临时解决方案。同时，这也为开发者提供了一个很好的案例，说明在移动端实现完善的无障碍支持需要考虑的诸多因素。