美国人口普查局估计，美国有超过12%的人口患有残疾。残疾可以包括视力困难、听力困难、行动不便，以及更多。
而且一个人在其生命的任何阶段都可能成为残疾人。
由于相当一部分人口有这样或那样的残疾，所以开发人人都能使用的技术是很重要的。这样，我们都可以消费科技内容，没有人被落下。
在这篇文章中，我们将介绍一些最佳的无障碍实践，以及你可以做些什么来使你的移动应用程序更容易被访问。
为每个元素添加有用的描述
美国疾病控制和预防中心的视力健康倡议指出:
2015年，共有102万人失明，美国约有322万人有视力障碍（VI），定义为视力较好的眼睛的最佳矫正视力。
此外，有820万人因未矫正的屈光不正而有视力障碍。到2050年，这些情况的数量预计将翻倍，大约有201万盲人，或有20/200或更差的VI，695万VI患者，以及1640万因未矫正屈光不正而有VI的人。(Varma 2015)
对于几乎没有视力的人来说，一个有用的无障碍工具是配音工具。这可以让用户在手机上收听网页的内容。
我想让你站在一个可能在手机上使用语音播报的人的角度。
下面是Facebook Marketplace的 "降价 "列表。只要听一下这段22秒的配音，就能听到这部分内容在使用该工具的人听来是怎样的。
配音说 "减价，按钮"，向用户表明这个部分是减价商品，而且在这个特定的焦点中，有一个点击动作，他们可以采取。
接下来，重点元素说，"隐藏类别，按钮"，这再次表明在这个重点元素中，用户可以采取一个行动来隐藏类别。
接下来，"查看全部，按钮 "被聚焦。这表明他们可以在这个元素上采取一个行动来查看该类别的所有项目。
在下一个焦点中，我们听到 "没有可用的照片描述，按钮，图像"。这个项目可能是什么？我们在这一点上不知道。
对于下一个被关注的元素，我们听到同样的话，"没有可用的照片描述，按钮，图像"。现在这个列表中有两个元素没有描述的内容。
下一个焦点元素说，"也许是珠宝的图像，按钮，图像"。句子前面的 "也许 "一词表明，配音工具对该元素可能是什么没有信心。
"珠宝的形象 "是一个广泛的描述，特别是如果你是在一个网站上购物。它是一条项链吗？是戒指吗？是一个耳环吗？它是一套珠宝吗？它是什么材料？它看起来像什么？这个珠宝的价格是多少？
而最后一个重点元素说的就是我们从前两个中听到的，"没有照片描述，按钮，图片"。
这就是几乎没有视力的用户要浏览应用程序的方式。这里有四个按钮，没有一个是有描述的。如果你在使用这个应用程序，你会点击哪一个？
现在，我想向你展示同一页面的视频记录，你可以看到下面。
配音提到的第一项 "没有照片描述，按钮，图片 "实际上是一张60年代的复古桌子的图片，而且是免费的。
第二件物品是一张价格为3美元的贴纸，上面写着："我永远和你在一起"，旁边有一只红色的鸟。
第三件物品只有部分描述（"可能是珠宝、纽扣、图像的图片"），是一个珍珠耳环，售价8美元。
最后，第四件说 "没有照片描述，按钮，图像 "的物品是一张皮卡丘的Pokeman卡片，价格为9.5美元。
在第一个音频片段之后，你是否期待这个？可能没有。如果你没有看到图片或阅读标题，你将不知道Facebook市场上有什么在出售。
解决这个问题的一个方法是确保每个元素都有一个accessibilityLabel ，上面有你需要的基本信息，以便在没有看到的情况下了解它是什么。React Native文档告诉你。
"要使用，将
accessibilityLabel属性设置为你的View、Text或Touchable上的一个自定义字符串"。
accessibilityLabel 是一种简单但有效的方式来为屏幕阅读器用户描述该元素。
为了向你展示这将如何工作，让我们一起编码一个更简单的例子:
例如，我们可以通过在TouchableOpacity 元素上添加一个accessibilityLabel 来制作Facebook市场的表格列表。
示例代码
<TouchableOpacity
accessible={true}
accessibilityLabel="Free, vintage table from the 1960s"
>
....
</TouchableOpacity>
上面的代码将accessibilityLabel 添加到包含整个按钮的元素中。我们添加了 "免费的，来自60年代的复古表 "作为accessibilityLabel。
当屏幕阅读器将鼠标悬停在有此属性的元素上时，它将显示："免费，来自1960年代的复古桌子，按钮"。这将让用户知道价格、简短的描述，以及这是一个他们可以点击的按钮的事实。
这使得这个特殊的元素对于那些依赖屏幕阅读器的人来说更容易理解。
确保描述该元素的状态
在一些元素中，你需要向用户描述一个组件的当前状态。
例如，如果你有一个复选框，你应该让用户知道这个复选框是否被选中。
另一个你想描述的常见元素是页面上的按钮是否被禁用。如果用户不能点击按钮，那么你应该让用户知道有一个按钮，但它被禁用了。
下面的LinkedIn帖子页面有一个禁用按钮的例子。除非用户在帖子正文中输入一些东西，否则这个按钮是不活跃的。
例子:
LinkedIn的帖子页面，焦点在昏暗的帖子按钮上。
在上面的图片中，焦点是在被禁用的帖子按钮上。当配音集中在该部分时，它说，"帖子，变暗，按钮"。这让用户知道这是一个按钮，但他们不能点击它，因为它被调暗了。
示例代码:
在下面的代码中，当你把焦点放在按钮上时，如果是禁用的按钮，它会说："Button, dimmed":
<Button accessibilityState={disabled ? {disabled: true} : {disabled: false}}>
下面是其他一些让用户知道一个元素的状态的方法。如果菜单项或复选框被选中，读屏器会说："菜单项，选中 "或 "复选框，选中":
//Menu Item
<Button accessibilityRole={"menuitem"} accessibilityState={selected ? { selected: true } : { selected: false }} />
//Checkbox
<Checkbox label="Checkbox" selected={checked} accessibilityState={checked ? { checked: true } : { checked: false }} />
语境很重要
由于人们在使用配音时听的是对页面的描述，所以元素的上下文要有意义，不能让人混淆。
这意味着，有时将某些元素组合在一起更有意义。如果用户在某一特定情况下可以采取一个以上的行动，我们应该把 [accessibilityActions](https://reactnative.dev/docs/accessibility#accessibility-actions)到它。
无益的例子
下面是我从我的LinkedIn应用程序中截取的一个截图。这个部分是一个链接，如果我点击它，我将进入应用程序的另一个部分。这个部分也有一个按钮，我可以对这个特定的元素采取更多的行动。
LinkedIn的通知说，"学士学位真的值得吗？这是最近的一项调查发现的。"在第一张图片中，重点是标题文字。在第二张图片中，重点是在标题旁边的 "6h"。
首先，画外音集中在标题上，"学士学位真的值得吗？这是最近一项调查的结果"。下一个被关注的元素是 "6h"，然后焦点转移到用户可以采取更多行动的三个点上。
当读屏器说 "6h "时，这很让人困惑--这是什么意思？能够看到该元素的用户可以理解这是6小时前发布的。但读屏器只是说 "6小时"，这让人困惑。
另外，在这个元素中，用户需要关注它的三个不同部分，以获得所有预期的含义。
对无障碍性来说，更好的做法是将这部分内容组合在一起，写成 "学士学位真的值得吗？这是最近的一项调查发现的，6小时前发布的，可采取行动"。这样，整个元素就有了更好的背景。
更好的例子
有重点的组件，内容是："前端工程师，AWS数据整理员，亚马逊网络服务（AWS），纽约，"右角有书签按钮。
上面是LinkedIn应用程序中另一个部分的例子。这一部分写道："前端工程师，AWS数据整理员，公司，亚马逊网络服务（AWS），地点，纽约州纽约市，可采取行动"。
虽然 "公司 "和 "地点 "这两个词没有出现在屏幕上，但配音读出了它，为用户提供了更好的背景。另外，书签按钮不是用户需要滚动来关注的另一个元素--它被组合在一起，为用户提供了更好的上下文。
示例代码
<View
accessible={true}
accessibilityActions={[
{ name: 'navigate', label: 'navigate' },
{ name: 'bookmark', label: 'bookmark' },
]}
onAccessibilityAction={(event) => {
switch (event.nativeEvent.actionName) {
case 'navigate':
Alert.alert('Alert', 'Navigated to another page');
break;
case 'bookmark':
Alert.alert('Alert', 'Bookmarked this link');
break;
}
}}
/>
在上面的示例代码中，读屏器会说："有行动，向上或向下滑动以查看自定义行动"。
当用户向上滑动时，他们会听到 "导航"。而后，当他们再刷一次时，他们会听到 "书签"。如果用户想选择任何一个选项，他们可以在听到他们想要的选项时双击。这样一来，行动就有了更好的背景。
总结
通过对你的代码进行小的修改，你可以使应用程序对所有用户来说都更容易访问。美国有12%的人口患有残疾，没有人应该被抛在后面。
残疾人可能会使用屏幕阅读器等工具，而你应该让你的应用程序对这些工具无障碍。
确保技术对每个人都是无障碍的，这是每个人的责任。谢谢你的阅读!
