ReactJS - 可访问性

可访问性 (a11y) 是以这样一种方式设计 Web 应用，即该应用对所有人都是可访问的，并支持辅助技术为最终用户读取应用内容。

React 支持 Web 应用中的所有可访问性方面。让我们在本节中看看 React 如何支持可访问性。

ARIA (aria-*) 属性

WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是一种标准，它指定了构建完全可访问的 JavaScript 小部件的方法。它提供了一大套 HTML 属性 (aria-*) 来支持可访问性。React 在其组件中支持所有这些属性。通常，React 将 HTML 属性限制为驼峰式命名法，但对于可访问性属性，它应采用短横线命名法或 Lisp 命名法，或者与 HTML 文档中一样。

例如，以下代码显示了如何使用 HTML 可访问性属性。

<input
   type="text"
   aria-label={labelText}
   aria-required="true"
   name="name"
/>

这里，

aria-label 用于指定输入元素的标签
aria-required 用于指定输入必须填写。

请注意，这些属性按原样使用（采用短横线命名法）。

语义化 HTML

通过应用语义化 HTML（article、section、navigation 等）标签编码的 Web 文档可以提高文档的可访问性。在 React 中，有些情况下我们仅使用块 (div) 来满足 React 框架的要求。例如，React 不支持在其渲染代码中使用多个标签。为了克服此限制，开发人员可以使用父标签 (div) 将多个标签作为子标签。

function ShowItems({ data }) {
   return (
      <div>
         <dt>{data.title}</dt>
         <dd>{data.description}</dd>
      </div>
   );
}

React 提供了 Fragment 组件来解决此问题。我们可以像下面这样替换 Fragment 而不是 div：

function ShowItems({ data }) {
   return (
      <Fragment>
         <dt>{data.title}</dt>
         <dd>{data.description}</dd>
      </Fragment>
   );
}

表单

每个输入都应有标签，并且标签应具有描述性，以便理解输入元素。React 提供了一个特殊的 props htmlFor 来指定特定描述的输入元素。开发人员可以使用它来创建可访问的表单。

<label htmlFor="firstName">Firstname:</label>
<input id="firstName" type="text" name="name"/>

键盘支持

键盘支持是创建可访问 Web 应用的必要条件。一些需要键盘支持的功能包括：

焦点 - React 提供了一个称为 Ref 的概念来访问原始 DOM 元素。当应用程序需要原始访问 DOM 元素时，可以使用 Ref 和 Forwarding Ref 来管理原始 DOM 元素。

跳过链接 - 跳过导航链接是支持可访问性的必要功能。它们允许用户在仅使用键盘访问应用程序时一次跳过所有导航。这可以通过智能锚标签来实现，React 完全支持智能锚标签。

<body>
<a href="#maincontent">Skip to main content</a>
...
<main id="maincontent">
   ...
</main>

鼠标和指针功能 - 为了创建真正可访问的应用程序，所有功能都应通过键盘访问。具有高级鼠标和指针交互的用户界面应更改为适应仅键盘交互的用户。React 提供了所有事件处理逻辑，可以将默认的基于鼠标的 UI 修改为基于键盘的 UI。

Aria 组件

React 社区提供了许多具有完全可访问性支持的组件。它们可以按原样使用，无需任何修改。它们会自动使应用程序变得可访问。一些具有 aria 支持的第三方组件如下：

react-aria - react-aria 提供了一大套具有完全可访问性支持的 React 组件
react-modal - react-modal 提供了具有 aria 支持的模态组件。
react-aria-modal - react-aria-modal 是另一个具有 aria 支持的模态组件。
react-select - react-select 提供了具有 aria 支持的选择组件。
react-dropdown-aria - react-dropdown-aria 提供了具有 aria 支持的下拉列表组件。
react-aria-menubutton - react-aria-menubutton 提供了具有 aria 支持的菜单按钮组件。
react-aria-tabpanel - react-aria-tabpanel 提供了具有 aria 支持的选项卡面板组件。

总结

React 提供了许多功能来创建完全可访问的、支持 aria 的 Web 应用。创建可访问的应用程序一直是一个挑战，而 React 通过提供现成的组件以及从头开始编写可访问应用程序的核心功能来减轻了一些负担。

打印页面