创建可访问的React Native应用程序

早在2020年1月，Shopify就公开宣布我们采用React Native。这意味着从那时起，我们所有的新移动应用程序都将使用React Native框架构建。由此延伸，这也意味着我们的无障碍团队在测试应用和指导设计和开发团队创建无障碍用户体验方面有了新的学习机会。

几个月后，几个来自Shopify的有才华的志愿者开始开发一个新的React Native应用程序OB欧宝娱乐APPCOVID盾: COVID-19暴露通知解决方案。当团队在开发COVID - Shield时，我被安排在开发过程中进行可访问性测试。

这篇文章详细介绍了我如何测试COVID - Shield的可访问性，仔细审查了几个关键问题，以及这些问题的相关解决方案。希望这些建议能够帮助你测试自己的应用，确保为所有用户创造可访问的体验。你也可以在下面观看这篇文章的视频版本:

在我们深入研究这些细节之前，值得注意的是，加拿大联邦政府采用了COVID- Shield，为加拿大公民提供一种潜在暴露于COVID-19的通知方法。这款应用被重新命名为COVID警报。未来的开发由加拿大数字服务团队接管。现在，让我们开始吧。

测试环境

由于COVID - Shield应用程序正在积极开发中，我的测试环境包括一些工具，而不是现实世界的物理设备:

• iOS模拟器与macOS无障碍检查器配对
• iOS模拟器与macOS VoiceOver配对
• 安卓模拟器配对与对讲屏幕阅读器
• 带有COVID - Shield快照的Android物理设备apk安装

为了充分了解如何要使用这些工具测试应用的可访问性，你可以阅读我的文章手机屏幕阅读器测试。

React Native Accessibility API

Facebook已经确保应用开发者能够创造出可访问性和包容性的用户体验React Native Accessibility API。当我向团队提出任何建议时，这是我的首选资源。

这个API包括一系列React方法和道具，为交互元素提供角色、名称和状态等信息。它还包括其他项目，以提高应用程序在使用时的一般可访问性辅助技术。

如果您非常熟悉HTML、DOM或ARIA规范，那么您在使用可访问性API方面就有了一个良好的开端。OB欧宝娱乐APP添加a等概念角色在控件上设置标签以提供语义意义aria-label，或者把东西完全藏起来aria-hidden都是可能的。

添加语义:角色、名称、状态

让我们从向元OB欧宝娱乐APP素添加语义的概念开始:角色、名称和状态。

在为网页开发时，作者拥有原生的“可点击”元素;按钮和链接元素。一个按钮通常用于提交表单或执行屏幕上的操作，例如启动模态窗口。链接用于请求新数据或将焦点从屏幕的一个点转移到另一个点。这些元素具有各自的语义，通过它们的角色、名称和状态(如果适用的话)共享。

React Native中的可点击元素

根据我对COVID - Shield应用程序的经验，团队决定制作该应用程序出现通过自定义的方式使每个平台更加本地化按钮组件。该组件包含一些逻辑来生成特定于平台的触摸控制。例如:

• iOS设备将接收TouchableOpacity组件
• Android设备使用了Ripple组件，从react-native-material-ripple包

我发现这些组件的问题是它们没有包含一个角色来帮助传达可点击元素的目的。没有这个元素的信息是，用户可能无法理解与元素交互时会发生什么。我们不仅希望帮助用户在使用我们的应用程序时取得成功，而且希望他们在使用应用程序时充满信心。

“我们不仅希望帮助用户在使用我们的应用程序时取得成功，还希望他们在这样做时充满信心。”

你可能还喜欢:移动可访问性:如何构建适用于所有用户的应用程序

添加角色

当我在iOS或Android上用屏幕阅读器测试COVID - Shield时，我注意到每个可点击/交互式控件都缺少角色描述。屏幕阅读器会停在控件上，只宣布控件的名称(如果存在的话)。作为一个视力正常的用户，我有视觉上的支持;也就是说，按钮的设计要表明它是可点击的控件。但作为屏幕阅读器的用户，这些信息没有被共享，这可能会导致困惑或沮丧感。

在React Native中，添加一个角色来提供当前元素的上下文是一个添加accessibilityRole属性设置为接收单击事件的组件。这个道具接受一个在API中定义的字符串值，其中一个是“button”的值，表示在激活时将产生一个屏幕上的动作。

< TouchableOpacity
accessibilityRole = "按钮"
…
>
输入代码
< / TouchableOpacity >

在HTML中，这类似于添加角色属性赋值给元素，并赋值为button。

之前:
“输入代码”

后:
“输入代码，按钮”

例如，上面的屏幕截图显示COVID - Shield有一个视觉样式的按钮，名称为“输入代码”。如果没有显式的角色声明，那么当控件被屏幕阅读器聚焦时，就只会发出“闪烁”的声音。没有分享更多的信息来表明元素实际上是什么。

在我们应用accessibilityRole使用适当的“button”值，然后将控件描述为“Enter code, button”。

同样，这样做的目的是提醒用户他们当前关注的是什么。“button”的声音描述提供了交互时可能发生的事情的线索，在本例中是将一个新视图加载到屏幕上以输入代码。

你可能还喜欢:考虑键盘可访问性设计应用程序的5个步骤

添加名称

应用程序中有一些可点击的元素，它们只使用图标来提供视觉效果。这些控件不仅失去了它们的角色，而且还失去了一个可访问的名称，以提供有关它们的含义的详细信息。

在测试时，屏幕阅读器会停在控件上，不显示任何内容。同样，作为一个视力正常的用户，我有图标的视觉可视性，表明控件的目的。但是，如果没有角色和名称，屏幕阅读器用户将体验到一个看似不必要的制表符。

“再一次，作为一个视力正常的用户，我看到了指示控制目的的图标。但是如果没有角色和名字，屏幕阅读器的用户将会经历一个看似不必要的制表符。”

在React Native中，添加一个名称来为用户正在与之交互的当前元素提供一种目的感，这需要包含accessibilityLabel道具。该道具接受一个由作者定义的字符串值，因此请确保包含适合控件上下文的内容。

在HTML中，这类似于添加aria-label属性赋给元素，并为其分配一个可访问的名称，以便屏幕阅读器宣布。

之前:
“……“♂️

后:
“关闭按钮”

在上面的截图中，我突出显示了一个向下指向箭头的图标控件。这意味着屏幕的这一部分是可折叠的。但是，由于没有标签或角色，屏幕阅读器将停在控件上，不提供任何更多信息。

添加显式名称和角色后accessibilityRole和accessibilityLabel道具，控件将被宣布为“Close, button”。这样，用户就会了解控件的目的，并对激活后的最终结果有信心。

添加状态

在COVID - Shield应用程序周围，存在控件处于特定状态的实例。在一个视图中，有一个已选中或未选中项目的列表。在另一个例子中，有一个带有“提交”控件的表单默认处于禁用状态。我知道这些东西，因为作为一个视力正常的用户，它们通过设计的视觉提供性传达给我。

然而，屏幕阅读器用户将无法通过听觉用户体验获取此类信息。没有以编程方式添加任何内容以提供有关控件当前状态的信息。

在React Native中，提供元素的状态是一个包含accessibilityState道具。该道具接受一个对象，该对象的定义和允许的值由API定义。

例如，将控件设置为“已禁用”是分配的问题accessibilityState对象键名为的禁用把它的值设为真正的。

在HTML中，这类似于添加一个ARIA状态属性。例如,aria-disabled传递窗体控件的禁用状态。或aria-selected传递选项卡控件的选定状态。

之前:
“提交代码”

后:
“提交代码，变暗，按钮”

在上面的截图中，我突出显示了一个带有标签“submit code”的表单提交控件。它在视觉上是灰色的，表示它的禁用状态。但是，由于没有提供可编程状态，屏幕阅读器将在控件上停止并仅宣布其名称。

在添加了显式状态对象和角色之后，控件将被宣布为“Submit code, dimmed, button”。在这个特殊的例子中，“暗淡”这个词是iOS独有的。Android将这种状态描述为“禁用”。

标题

标题通常是大而粗体的文本，表示页面的标题或内容的新部分。在测试COVID - Shield时，我注意到整个应用程序中都有可见的标题文本实例，通常在新视图的顶部。从本质上讲，设计在视觉上传达了标题的存在和结构，但听觉体验却没有。

你可能会问，“为什么这很重要?”

答案是，依赖辅助技术的人通常首先通过标题进行导航。

“依赖辅助技术的人通常首先通过标题导航。”

当屏幕阅读器用户访问一个他们从未访问过的新网站时，他们通常会首先通过标题进行导航。屏幕阅读器的特点是允许用户通过特定类型的内容进行导航:链接、按钮、标题、图像、表格、列表等。

具体来说，人们首先通过标题导航，以便快速了解页面上提供的内容。这与浏览报纸或博客文章的标题是一样的。这个想法是收集可用内容的一般含义，然后重新访问感兴趣的部分。

添加标题

可以通过添加。来指示标题元素accessibilityRoleProp添加到包含标题文本的组件。根据React Native可访问性API，“header”的字符串值应该提供给accessibilityRole道具。

<文本
…
accessibilityRole = "头"
>
分享你的随机id
< /文本>

在HTML中，这类似于添加角色= "标题"属性设置为文本元素，但最好使用一个原生标题元素。同样有趣的是，在React Native中，不可能分配标题级别。在HTML中，我们有h1通过编辑标题元素用于指示标题级别和内容的逻辑结构。但在React Native中，它只是一个标题。

之前:
“分享你的随机id”

后:
“分享你的随机id，标题”

对于这里的示例，屏幕截图显示了COVID Shield视图，其中有一个视觉样式的文本标题，内容为“分享您的随机id”。如果没有显式的标题声明，屏幕阅读器将以纯文本的形式读取内容。这并不是最糟糕的用户体验，但它也没有传达与视力正常的用户所接收到的相同的信息:大而粗体的字体表示内容的新部分。

在加入accessibilityRole然后将文本描述为“分享您的随机id，标题”。

同样，不仅听觉用户体验将文本描述为表示新内容部分的标题，屏幕阅读器用户还可以单独通过标题导航，以便整体理解页面上的内容。

这是快速可访问性获胜的一个很好的例子:低努力产生高影响。

你可能还喜欢:通用设计:11个实用技巧，让你的网站和应用程序更容易访问

提示文本

提示文本旨在提供视觉上对视力正常的用户隐藏的附加信息。例如，如果有一个视觉指示器，比如一个图标，向视力正常的用户传达含义，我们还需要将这些细节传递给那些可能无法看到视觉提示的人。

这种情况出现在测试COVID - Shield时，主菜单中的几个项目会打开设备web浏览器，而不是在应用程序中加载新视图。

当一个新的浏览器窗口打开点击，让用户知道。赋予用户权力——让他们决定如何以及何时进行。

当一个新的浏览器窗口打开点击，让用户知道。给用户权力，让他们决定如何以及何时继续。”

这种情况在网络上也很常见。这个想法是，如果一个链接打开了一个新的浏览器窗口，或者如果应用程序将用户带出当前应用程序，那么最好的做法是通知用户最终结果。

为什么这很重要?如果没有这个上下文，人们可能会认为他们是在遵循一个内部网站链接，这个链接在同一个浏览器窗口中加载。如果用户还没有准备好离开当前站点，他们就需要努力切换回上一个标签或应用程序。

其理念是赋予用户权力;告知用户交互过程中可能发生的情况，以便决定如何以及何时进行。

包括提示文本

我们可以添加提示文本accessibilityHintProp指向组件，当该组件被激活时，将打开新上下文。该道具接受一个由作者定义的字符串值，因此请确保包含适合控件上下文的内容。通常，“在新窗中打开”之类的内容提供了提醒用户所需的上下文。

在HTML中，这类似于添加的upcoming-but-not-available-yetaria-description属性。

之前:
“检查症状”

后:
"检查症状，在新窗中打开，链接"

对于本例，屏幕截图显示COVID Shield菜单突出显示了一个可单击的控件，其内容为“检查症状”。文本旁边是一个向上和向右指向的箭头图标。这里的目的是提供激活结果的视觉指示:离开应用程序并进入不同的上下文。

没有accessibilityHint道具，控制栏上写着"检查症状"

在加入accessibilityHint(和accessibilityRole) prop，然后将该控件描述为“检查症状，在新窗中打开，链接”。

图标不仅增加了视觉用户体验，通过分享图标背后的含义也增强了听觉用户体验。这样一来，所有用户都能在知情的情况下决定是否以及何时激活链接，是现在激活还是准备好了再激活。

集中管理

焦点管理是一种代表用户有目的地将键盘焦点光标从一个元素移动到另一个元素的方法。这种技术有时需要引导用户完成应用程序的预期流程。焦点管理只应该在绝对必要的情况下使用，以免在发生意外的焦点转移时为用户创造更多的工作。

例如，当打开一个模态窗口时，焦点必须放在模态窗口上或内部，以便向用户提供上下文感知。否则，焦点仍然在激活器控件上，用户可能不知道或无法轻松地访问模态内容。

应用程序视图焦点管理

在React Native和单页面应用程序通常，关键的可访问性问题在于管理视图之间的焦点。

在传统的浏览器环境中，用户只需单击一个链接，就会刷新整个页面。此时，用户的焦点将放在文档的顶部，允许用户从上到下有机地发现内容。

在React Native和其他单页应用环境中，情况并非如此。当一个新视图加载到屏幕上时，视力正常的用户将看到新的内容。但是，重点仍然放在前面的激活器控件上。问题是:

1. 没有向屏幕阅读器用户提供视图更新成功的通知。焦点仍然停留在他们之前点击的控件上。
2. 这将导致令人困惑的用户体验，用户可能会质疑应用的质量，或者怀疑自己是否做错了什么。

当用户决定移动光标时，没有人知道它会在哪里结束。

我们如何处理从一个视图到下一个视图之间的焦点管理?你可以采用几种不同的方法，其中两种包括:

• 将焦点转移到新的视图容器，允许用户向前导航，就好像完全刷新发生了一样
• 将焦点转移到顶层标题元素，提供视图更改的确认，并允许用户从该点继续前进

这是一些可能的解决方案。但与其猜测，不如让我们回顾一下2019年进行的一项研究中的一些数据。

数据驱动设计

这项研究被称为，我们从用户测试中了解到的可访问的客户端路由技术与Fable技术实验室。它是由独立的web开发人员和无障碍主题专家Marcy Sutton与Fable技术实验室，这是一家网站无障碍众测服务公司。

这项研究的目的是找出哪种焦点管理方法为使用各种辅助技术的许多不同的残疾用户群体提供了最好、最积极的用户体验。

具体而言，该研究包括:

• 视力正常的纯键盘用户
• 屏幕阅读器用户
• 弱视变焦软件用户
• 语音听写用户
• 交换机接入用户

所有这些用户组都有一组独特的需求和期望，这些需求和期望可以被视为成功的用户体验。

虽然这项研究的重点是基于javascript的单页应用，但这个概念仍然可以应用于React Native应用。

当你有几分钟的时间，你一定要通读这篇文章，但我将直接得出结论，什么是对某些人来说是好的解决方案，但不是一定最好的解决方案。

将焦点移到标题上

将焦点移到标题上。

“把焦点转移到标题上。”

将焦点转移到标题元素是一种更成功的解决方案，对大多数用户群体都很有效。这个解决方案是理想的，因为它通过宣布标题文本的方式为屏幕阅读器用户提供了新的视图加载的清晰指示。这一声明意味着有新的内容可供消费。

对于语音听写、只能使用键盘和缩放的用户，将焦点转移到标题上可以将用户定位到应用程序中的新起点。理想情况下，当标题处于焦点中时，它应该包含某种视觉指示器，例如焦点大纲。OB欧宝娱乐APP如果没有轮廓，一些视力正常的辅助技术用户可能很难理解他们的光标当前聚焦的位置。

关注React Native中的标题

我们如何在React Native中将焦点转移到标题上?这个问题问得好，但我恐怕也没有一个好的答案。

这是我报告的问题之一，建议将焦点移动到加载时的视图标题。不幸的是，COVID - Shield团队没有时间解决这个问题。

相反，我们可以回顾一下加拿大数字服务团队为Covid Alert应用程序实施的内容。

回顾COVID警报应用程序在GitHub上的源代码在美国，CDS团队创建了自己的系统accessibilityAutoFocus道具。这个道具被放置在标题上文本组件。当视图加载时，焦点转移到标题。

截图显示的是在Android手机上运行的“Covid Alert”应用。标题文本“Enter your one-time key”用绿色边框从TalkBack屏幕阅读器中突出显示，表明文本有焦点，并在视图加载时宣布。有了这个道具，视图之间的焦点就得到了很好的管理，辅助技术的用户就更有可能获得成功。

这是一个示例解决方案。可能还有其他可用的组件，例如可以合并到项目中的第三方组件。或者，根据项目的结构，您可以通过使用React来简化事情裁判与componentDidMount在视图完全加载时转移焦点的生命周期方法。但一定要看看accessibilityAutoFocusCOVID Alert应用程序在GitHub上的解决方案。效果很好。

你可能还喜欢:包容性设计:为每个人设计的12种方法

可访问性不仅仅是屏幕阅读器

我们今天讨论的所有内容都是为了迎合屏幕阅读器的用户体验。虽然解决屏幕阅读器的问题确实有助于消除其他辅助技术的障碍，比如只使用键盘和语音听写的用户，但这不应该是唯一的重点。

iOS和Android内置了许多其他辅助功能。以下是你下次测试可访问性时可以尝试的几个方面:

• 字体大小确保应用程序的文本能够根据操作系统设置进行动态调整。这有助于低视力用户轻松阅读内容。
• 颜色反转这对有各种视觉障碍的人也有帮助。测试以确保当颜色反转时，您的内容仍然清晰可辨。
• 减少运动:有节制地、有目的地使用动画。有些人喜欢很少或不运动，因为他们可能容易晕车或其他前庭问题。使用prefers-reduced-motionCSS媒体查询来利用这个操作系统设置。

这些只是一些可用的设置。我鼓励你探索每一种设置，并学习如何调整你的应用程序，使其更具动态性，以满足用户的需求。

资源

• React Native Accessibility API
• COVID Shield可访问性问题
• 谷歌网络基础:可访问性
• Google Chrome开发者:Rob Dodson的访谈
• dev:所有人都可以访问
• 书呆子。io:今OB欧宝娱乐APP天就开始构建可访问的Web应用程序
• Smashing杂志:屏幕阅读器用户如何上网
• Shopify用户体验的可访问性
• Shopify北极星的可访问性
• Shopify合作伙伴的可访问性