可访问性 （a11y） 是以这样一种方式设计 Web 应用程序，即每个人都可以访问应用程序，并支持辅助技术为最终用户阅读应用程序的内容。
React 支持 Web 应用程序中可访问性的所有方面。在本章中，让我们看看 react 是如何支持可访问性的。
ARIA （aria-*） 属性
WAI-ARIA （Web Accessibility Initiative - Accessible Rich Internet Applications） 是一种标准，指定了构建完全可访问的 JavaScript 小部件的方法。它提供了大量 HTML 属性 （aria-*） 来支持辅助功能。React 在其组件中支持所有这些属性。一般来说，React 将 HTML 属性限制为 camelCase 的形式，但对于可访问性属性，它应该是 kebab-case 或 lisp-case 的形式，或者简单地像 HTML 文档中一样。
例如，下面的代码显示了如何使用 HTML 辅助功能属性。
<input
type="text"
aria-label={labelText}
aria-required="true"
name="name"
/>
这里
- aria-label 用于指定输入元素的标签
- aria-required 用于指定应填充输入。
请注意，这些属性将按原样使用（以 kebab-case 格式）。
语义 HTML
通过应用语义 HTML（文章、章节、导航等）标签进行编码的 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 应用程序的必要条件。期望键盘支持的一些功能是，
Focus − 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 为 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 以现成组件的形式减轻了一些负担，以及从头开始编写可访问应用程序的核心功能。
