时间戳

首页 > 解决方案 > Android 上的 RN 可访问性 - TalkBack 如何通过 View 读取的顺序

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

问题描述

我正在尝试在 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}
      />
    )
}

标签： javascriptandroidreact-nativeaccessibilitytalkback

解决方案

如何在不禁用 TalkBack 的情况下摆脱 UI 中的绿色框。

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

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

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

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

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

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

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

推荐阅读