React Native 可访问性：演变和其他方面

移动应用程序开发市场取决于全球用户的偏好，这意味着随着优先级的变化，趋势也在演变。在这些变化和演变中，React Native Accessibility 是开发人员中最热门的技术栈。因此，这篇博文涵盖了 React Native Accessibility 的各个方面，包括功能、属性等，可以帮助企业为最终用户提供更好的结果和可访问性。

React Native 无障碍功能介绍

可访问性是指访问某些东西。这个术语已经存在了很长时间，但最近随着移动应用程序开发超越编码而变得越来越重要。辅助功能侧重于无法利用移动应用程序开发市场的技术进步的身体残障用户。全球的开发者社区和企业主也已经意识到可访问性对于上述受众的重要性。因此，引入屏幕阅读器、语音增强、导航器等辅助功能选项，使小众受众能够利用上述技术栈的优势。

React Native Accessibility为为身体受损的观众开发具有多种功能的应用程序做出了重大贡献。所有主要平台，无论是 Android、iOS 还是任何其他媒体，都具有辅助功能选项，例如 iOS 中的画外音和 Android 中的 Talkback，以将应用程序与辅助技术集成，例如适用于 iOS 的捆绑式屏幕阅读器 VoiceOver 和适用于 Android 的 Talkback。React Native 还具有互补的 API，可让您容纳所有用户。

React Native 可访问性随时间的演变

React Native Accessibility自问世以来出现了显着的热潮，并且一直在增长。每个产品所有者以及企业所有者都意识到他们对社会的责任，并为具有不同可访问性需求的用户创建移动应用程序。随着时间的推移，React Native 引入了许多辅助功能和改进，包括：

内置可访问组件

React Native 包括一组内置的可访问组件，例如按钮、文本输入和图像，您可以使用它们来创建可访问的用户界面。

咏叹调支持

它还包括 ARIA 规范，该规范提供了一种通过定义元素的角色、状态和属性来创建可访问的 Web 内容的方法。

辅助功能API

它提供了一个可访问性 API，允许开发人员访问和修改组件的可访问性信息，包括设置可访问性标签、提示和特征。

可自定义的辅助功能设置

它提供用于自定义辅助功能设置的 API，例如字体大小、颜色对比度和字幕选项，这有助于提高应用程序对残障用户的辅助功能。

手势识别

React Native 提供手势识别支持，您可以使用它为用户提供与应用程序交互的替代方式，例如滑动手势或双击。

辅助功能审核工具

有几种工具可以帮助您审核 React Native 应用程序的可访问性。这些工具包括 Android Studio 中的辅助功能扫描器，它可以帮助识别您需要关注的辅助功能问题。

以可访问性为中心的测试

使用屏幕阅读器、放大镜和语音命令等辅助技术测试 React Native 应用程序的可访问性，以确保您的应用程序对具有不同可访问性需求的用户的可访问性。

无障碍指南

React Native 开发人员的辅助功能指南，例如 W3C 的Web 内容辅助功能指南(WCAG) 和 Apple 的人机界面指南，提供了创建可访问的移动应用程序的最佳实践。

想要构建一个打破障碍并与所有用户联系的 React Native 应用程序？聘请对可访问性原则有深刻理解并能完美实施它们的
React Native 开发人员。

React Native 可访问性的属性

辅助功能属性通过向屏幕阅读器等辅助技术提供有关 UI 元素的信息，提高残障用户的移动应用程序辅助功能。React Native 提供了一系列可访问性属性来增强移动应用程序的可访问性。

无障碍

当可访问性元素属性设置为 true 时，表示您可以使用辅助技术访问视图。此属性还将视图的子项分组为单个可选择的组件。除非另有说明，否则可触摸元素会自动变为可访问。

无障碍标签

React Native 中的accessibilityLabel属性为屏幕阅读器等辅助技术提供了一个描述 UI 组件的标签。通过设置 accessibilityLabel 属性，开发人员可以确保屏幕阅读器在用户与之交互时能够充分识别 UI 元素，例如按钮。它使依赖辅助技术的用户能够理解 UI 元素的用途，为他们提供更易于访问和包容的用户体验。

辅助功能提示

accessibilityHint 向用户提供有关对可访问性元素执行操作的结果的附加信息，当仅从可访问性标签中看不出来时。它可以帮助残障用户理解该元素的用途以及如何与之交互以实现特定结果。

accessibility角色

React Native 中的 accessibilityRole 属性将组件的预期用途传达给依赖辅助技术的用户。

可达性状态

React Native 中的 accessibilityState 属性将当前组件状态传达给依赖辅助技术的用户。

可达性价值

组件的 value 属性指示其当前值。它可以包含值的文本表示或组件，例如进度条和带有范围的滑块；它包括范围信息，例如最小值、最大值和当前值。

accessibilityActions

辅助功能操作允许辅助技术以编程方式调用组件的操作。组件必须做两件事来支持可访问性操作，

• 通过 accessibilityActions 属性定义它支持的操作列表。

• 实施 onAccessibilityAction 函数来处理操作请求。

accessibilityViewIsModal：此属性指示 UI 组件是否为模态视图，这可以帮助辅助技术了解组件的上下文。

在 React Native 中启用辅助功能的功能

React Native 拥有多种工具和技术，使开发人员能够创建可供残障用户使用的移动应用程序。因此，它们可以迎合包括残障人士在内的大量受众，从而通过改进的包容性和可访问性为所有人提供更好的用户体验。其中一些功能是：

无障碍道具

您可以将 AccessibilityProps 称为道具，开发人员可以使用这些道具来提供有关 UI 组件的附加信息，以访问屏幕阅读器等服务。AccessibilityProps 包括 accessibility、accessibilityLabel、accessibilityHint、accessibilityRole、accessibilityStates 等。下面是一个简单的代码示例，解释了如何在 React Native 组件中使用 AccessibilityProps。

从“反应”导入反应；从'react-native'导入{文本，视图}；const MyComponent = () => {
  返回 （
    <视图>
      <文字
        可访问= {真}
        accessibilityLabel="你好世界"
        accessibilityHint="这是一条问候信息"
        accessibilityRole="header"
        accessibilityStates={['selected']}
      >
        你好世界
      </文本>
    </查看>
  );};导出默认的 MyComponent；

无障碍信息

AccessibilityInfo 正是一个 React 本机 API，提供有关设备辅助功能设置的信息。无论屏幕阅读器或用户是否启用了更大的文本（放大镜），它都会起作用。它允许开发人员根据他们的可访问性设置调整他们的应用程序行为。下面是如何在 React Native 组件中设置 AccessibilityInfo API 的示例。

从“反应”中导入反应，{useState，useEffect}；import { Text, View, AccessibilityInfo } from 'react-native';const MyComponent = () => {
  const [isScreenReaderEnabled, setIsScreenReaderEnabled] = useState(false);
  使用效果（（）=> {
    const getAccessibilityInfo = async () => {
      const screenReaderEnabled = await AccessibilityInfo.isScreenReaderEnabled();
      setIsScreenReaderEnabled(screenReaderEnabled);
    };
    getAccessibilityInfo();
  }, []);
  返回 （
    <视图>
      <文本>
        {isScreenReaderEnabled
          ？'屏幕阅读器已启用'
          : '屏幕阅读器未启用'}
      </文本>
    </查看>
  );};导出默认的 MyComponent；

VoiceOver 和 TalkBack 支持

“VoiceOver”和“TalkBack Support”都属于屏幕阅读器服务，专门用于为视障用户提供口头反馈。React Native 通过 AccessibilityProps 拥有对这些服务的内置支持。下面是如何在 React Native 组件中使用 VoiceOver 和 TalkBack 支持的代码示例。

从“反应”导入反应；从'react-native'导入{文本，视图}；const MyComponent = () => {
  返回 （
    <视图>
      <文字
        可访问= {真}
        accessibilityLabel="你好世界"
        accessibilityHint="这是一条问候信息"
        accessibilityRole="header"
        accessibilityStates={['selected']}
        accessibilityTraits={['header']}
      >
        你好世界
      </文本>
    </查看>
  );};导出默认的 MyComponent；

辅助功能事件

AccessibilityEvent API 使 React 本机开发人员能够轻松处理应用程序视图上的可访问性事件。它还允许他们在用户与应用程序的可访问组件交互时接收通知。下面是如何在 React Native 组件中使用 AccessibilityEvent API 的代码示例。

从“反应”中导入反应，{useState，useEffect}；import { Text, View, AccessibilityEvent } from 'react-native';const MyComponent = () => {
  const [eventCount, setEventCount] = useState(0);
  使用效果（（）=> {
    const onAccessibilityEvent = AccessibilityEvent.addEventListener(
      '公告完成',
      处理辅助功能事件
    );
    返回（）=> {
      onAccessibilityEvent.remove();
    };
  }, []);
  const handleAccessibilityEvent = (事件) => {
    设置事件计数（事件。事件计数）；
  };
  返回 （
    <视图>
      <Text>触发的辅助功能事件：{eventCount}</Text>
    </查看>
  );};导出默认的 MyComponent；

无障碍组件

React Native 中 Accessibility Component 的主要功能是包装 UI 组件并使其可访问。它根据设备的辅助功能设置设置辅助功能道具。下面是演示如何使用它的示例代码片段。

从“反应”导入反应；import { Text, View, AccessibilityInfo } from 'react-native';const MyComponent = () => {
  const updateAccessibilityState = (isEnabled) => {
    AccessibilityInfo.setAccessibilityFocusEnabled(isEnabled);
  };
  返回 （
    <视图>
      <辅助功能信息
        onChange={updateAccessibilityState}
      />
      <Text>我的可访问组件</Text>
    </查看>
  );};导出默认的 MyComponent；

结论

（言鼎科技）