Android 上的 RN 可访问性 - TalkBack 读取视图的顺序 [英] RN accessibility on Android - order of how TalkBack reads through View

问题描述

我正在尝试在 RN 中使用辅助功能，但有几个问题.如何在不禁用 TalkBack 的情况下摆脱 UI 中的绿框.第二个是 - 如何强制执行屏幕阅读器读取由多个组件组成的视图元素的顺序?目前，我根据某些参数操纵状态并将其传递给属性:accessibilityLabel、accessibilityHint、importantForAccessibility 来实现这一点.有没有更好的方法来做到这一点?下面是一个例子:

<预><代码>this.setState(function(){if(<某些条件>){返回{无障碍标签:按向右移动到其他项目"，importantForAccessibility:是"}}别的{返回 {可访问性标签:别的东西"，importantForAccessibility:无隐藏后代"}})}

然后

<预><代码>使成为(){返回(<查看可访问性标签={this.state.accessibilityLabel}importantForAccessibility={this.state.importantForAccessibility}/>)}

解决方案

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

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

据我所知，作为用户，它无法关闭.(我在 Android 8.0 上安装了 Android Accessibility Suite 7.2 版).不过，其他平台上的某些屏幕阅读器会提供用户偏好来自定义外观.

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

<块引用>

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

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

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

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

I am trying to use accessibility features in RN and have few questions. How would I get rid of green box in UI, without disabling TalkBack. And the second is - how to enforce the order in which screen reader reads through the elements of view that is composed from several components? At the moment I manipulate state depending on certain parameters and pass it to attributes: accessibilityLabel, accessibilityHint, importantForAccessibility to accomplish that. Is there a better way to do it? Here is an example:

    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"
          }
       }
     )}

and then

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

解决方案

How would I get rid of green box in UI, without disabling TalkBack.

The green box is part of Talkback. It's an important feature which makes it clear where the screen reader's cursor is; useful for a variety of disablities including partial sightedness, dyslexia, memory impairments, and attention difficulties.

As a user, it can't be turned off as far as I know. (I have Android Accessibility Suite version 7.2 on Android 8.0). Some screen readers on other platforms offer user preferences to customize the appearance though.

As a developer you can't turn it off either - it's part of Talkback, not the application. This is a good thing; it's the user's assistive technology, not the developer's. Even if a developer could turn off the screen reader's visual cursor, they shouldn't. (It would be like styling a web page with * { cursor: none !important; } - mouse users wouldn't thank you for that!)

how to enforce the order in which screen reader reads through the elements of view that is composed from several components?

When using web browsers, screen readers read web pages in the DOM order, so the general principle which applies to web pages is to make the visual order match the DOM order. (Aside: this is also important for sighted keyboard users, because a tabbing order which differs from the visual order can be very confusing.)

I'm not so familiar with React-native applications, but I would imagine a similar thing applies. You should structure the application's content and controls in a meaningful order. If the application has several regions, mark these up in a way that allows the user to skip to a particular region (with headings, ARIA landmark roles, or possibly other grouping containers). Be aware that screen reader users are not necessarily blind, so the point about visual order and DOM order is important.

It's worth clarifying whether you mean enforcing the "reading order" of the entire application (say, while a user explores the application UI just to see what's there); versus managing focus in response to a particular user action inside a particular widget (like a date picker). Since React-native uses JS, I'd recommend reading ARIA - Managing Focus to see if this applies to your situation.

这篇关于Android 上的 RN 可访问性 - TalkBack 读取视图的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！