ReactJS - 可访问性

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

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

ARIA (aria-*) 属性

WAI-ARIA(Web 可访问性倡议 - 可访问的富互联网应用程序)是一种标准，指定了构建完全可访问的 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 即可，如下所示 −

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 和 转发 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 以现成的组件和核心功能的形式减轻了负担，可以从头开始编写可访问的应用程序。