Android 上的 RN 可访问性 - TalkBack 如何通过 View 读取的顺序

Question

我正在尝试使用 RN 中的可访问性功能并且有几个问题。如何在不禁用 TalkBack 的情况下摆脱 UI 中的绿色框。第二个是 - 如何强制屏幕阅读器读取由多个组件组成的视图元素的顺序？目前，我根据某些参数操作状态并将其传递给属性：accessibilityLabel、accessibilityHint、importantForAccessibility 来完成此操作。有更好的方法吗？ 这是一个例子：

    this.setState(function(){
       if(<some condition>){
         return{
          accessibilityLabel: "press right to move to other item",
          importantForAccessibility: "yes"
         }
       }else{
          return {
            accessibilityLabel: "something else",
            importantForAccessibility: "no-hide-descendants"
          }
       }
     )}

然后

render(){
    return(
      <View 
       accessibilityLabel= 
       {this.state.accessibilityLabel}
       importantForAccessibility= 
       {this.state.importantForAccessibility}
      />
    )
}

Answer 1

如何在不禁用 TalkBack 的情况下消除 UI 中的绿框。

绿色框是 Talkback 的一部分。这是一个重要的功能，它可以清楚地显示屏幕阅读器的光标在哪里；可用于各种残疾，包括视力不全、阅读障碍、记忆障碍和注意力障碍。

据我所知，作为用户，它无法关闭。 （我在 Android 8.0 上有 Android Accessibility Suite 版本 7.2）。不过，其他平台上的一些屏幕阅读器会提供用户偏好来自定义外观。

作为开发人员，您也不能将其关闭 - 它是 Talkback 的一部分，而不是应用程序。这是一件好事；它是用户的辅助技术，而不是开发人员的。即使开发人员可以关闭屏幕阅读器的视觉光标，他们也不应该这样做。 （这就像使用 * { cursor: none !important; } 设置网页样式一样 - 鼠标用户不会为此感谢您！）

如何强制屏幕阅读器阅读由多个组件组成的视图元素的顺序？

在使用网络浏览器时，屏幕阅读器按 DOM 顺序阅读网页，因此适用于网页的一般原则是使视觉顺序与 DOM 顺序匹配。 （另外：这对于有视力的键盘用户也很重要，因为与视觉顺序不同的 Tab 键顺序可能会非常混乱。）

我对 React-native 应用程序不太熟悉，但我想类似的事情也适用。您应该以有意义的顺序构建应用程序的内容和控件。如果应用程序有多个区域，请以允许用户跳到特定区域的方式标记它们（使用标题、ARIA 地标角色或可能的其他分组容器）。请注意，屏幕阅读器用户不一定是盲人，因此视觉顺序和 DOM 顺序很重要。

有必要澄清一下您是否是指强制执行整个应用程序的“阅读顺序”（例如，当用户浏览应用程序 UI 只是为了查看其中的内容时）；与管理焦点以响应特定小部件（如日期选择器）内的特定用户操作。由于 React-native 使用 JS，我建议阅读 ARIA - Managing Focus 看看这是否适用于您的情况。