随着人们对无障碍设计的关注度越来越高，我们需要确保我们所创建的应用能够让广大人群都可以使用。React Native 提供了许多方便的方法，可以帮助我们建立更加无障碍友好的应用。
在本文中，我们将分享一些使用 React Native 创建无障碍设计的建议，并提供一些示例代码。如果你想了解更多关于 React Native 的基础知识，请查看官方文档。
开始
要创建无障碍设计的应用，必须考虑许多不同的因素。以下是一些需要考虑的要点：
1. 表达语义
在构建应用的时候，请考虑如何展示信息。有些用户无法使用视觉来理解信息，如：视力受损的人。对于这些用户，我们需要使用其他的方式来表达语义。比如，可以使用 accessibilityLabel、accessibilityHint、accessibilityRole和accessibilityState等 props 来描述 UI 元素。
虽然这些 props 不是必须的，但它们确实可以提高使用无障碍用户机会。我们可以将 accessibilityLabel置为某个视觉上不可见的元素的名称来向用户说明其功能，而accessibilityHint可以提供有关元素预期行为的更深入的信息。例如：
<Text accessibilityLabel="这是一些无法查看的文字">...</Text>
如果某个元素的状态发生了变化，通过 accessibilityState 众多的属性，我们可以让用户知道当前元素的状态。举个例子：
<Text accessibilityState={{ checked: true }}>已选中</Text>
2. 使用可触及元素
无论用户使用哪种设备，所有的控制元素都必须是可以触及的。这意味着我们必须确保使用足够大的元素，并以合适的距离进行分隔。为了提高可接近性，应便携控制元素尺寸变化各不相同。
3. 视觉和语音提示
只是通过视觉提示信息不足以给所有用户提供支持。我们应考虑使用声音或触觉，或者既使用视觉又使用声音或触觉来向人们传递信息。可以使用 accessibilityTraits、accessibilityViewIsModal和accessibilityLiveRegion等 props 来描述元素。例如：
<TextInput accessibilityTraits={['text', 'selected']} accessibilityViewIsModal={true} accessibilityLiveRegion="polite" />
4. 测试
当一个应用程序中包含多种不同的用户界面元素时，测试是至关重要的。一种常见的方法是使用无障碍功能检测器，例如react-native-accessibility-engine，它可以模拟使用无障碍的用户。除此之外，也可以使用无障碍功能施行的终端设备实际测试。
示例代码
以下是一些代码示例，说明如何在 React Native 中使用许多无障碍功能。
1. 添加一个 accessibilityLabel
<View> <Text style={styles.text} accessibilityLabel="文本组件" accessibilityHint="这是一个文本组件"> 我是一些文字 </Text> </View>
在上面的代码中，我们添加了一个 accessibilityLabel prop ，来提供关于该元素的信息。在此例中，我们所使用的 accessibilityLabel是一个文本组件，并添加了一个更加详细的 accessibilityHint。随着如此，失明或视力染色者可以在使用无障碍界面时，更好的理解它们。
2. 使用输入框
-- -------------------- ---- ------- ----- ------------------------------ ---------- -------------------- ----------------------------- ----------------- --------------------- ------------------- -- -------展开代码
在此例中，我们添加了一些 accessibilityLabel和 placeholder 属性，它们可以为用户提供需要的提示信息。例如，可以向输入框添加一个描述性的标题，以便用户知道需要在其上输入什么。
3. 使用按钮
-- -------------------- ---- ------- ----- ------------------------------- ----------------- --------------------- ----------- -- ---------------- ------------------------- ------------------------------- - ----- ----------------------------------- ------------------- -------展开代码
在此处，我们使用一个 accessibilityLabel prop 来描述按钮。当我们使用 accessibilityHint 参数来指明该按钮是用来做什么的，能够使用户更好地理解该元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ceb527e46428fe9e94a805
