React 中的可访问性

无障碍是指应用程序能够被所有人（包括残障人士）使用。作为开发者，您有责任确保每个人都能在您的应用中获得良好的体验。为了让您的 React 应用具备无障碍功能，您应该了解无障碍究竟是什么？那就让我们开始吧！

什么是无障碍以及为什么需要无障碍？

Web 可访问性也被称为 a11y。A11y 是一个数字缩写，代表可访问性，由“a”后面跟着 11 个字母，再后面跟着“y”。它是可供每个人使用的网站的设计和创建。

• 辅助技术需要辅助功能支持来解释网页。

• 可访问性是网站必不可少的工具或方式，它可以通过可点击的按钮、下拉菜单或用于写评论等内容的空间等功能让用户轻松访问网站。

• 辅助功能还能帮助高级用户更快地使用键盘（而非鼠标或触摸屏）与应用程序交互。尤其对于需要大量数据输入的应用程序，良好的键盘导航支持可以显著提高用户的工作效率。

可访问性标准和指南
有一些可用于实现可访问性的标准指南，它们有助于我们实现网站构建的可访问性。其中一些是：

WCAG： Web 内容无障碍指南 (WCAG) 由 W3C 与世界各地的个人和组织合作制定，旨在为 Web 内容无障碍提供统一的共享标准，以满足全球个人、组织和政府的需求。WCAG 文档阐述了如何让残障人士更轻松地访问 Web 内容。Web“内容”通常指网页或 Web 应用程序中的信息，包括：

• 文本、图像和声音等自然信息
• 定义结构、表示等的代码或标记。

WAI-ARIA： Web 无障碍倡议 - 无障碍富互联网应用 (WAI-ARIA)，即无障碍富互联网应用套件，它定义了一种使 Web 内容和 Web 应用更易于残障人士访问的方法。它尤其适用于使用 HTML、JavaScript 和相关技术开发的动态内容和高级用户界面控件。

使用 React 实现无障碍功能：

React 完全支持构建可访问的网站，通常是通过使用标准 HTML 技术。让我们看看如何让您的 React 应用程序更易于访问。

ARIA：
无障碍富互联网应用 (ARIA) 是一组属性，用于定义如何使 Web 内容和 Web 应用更方便残障用户访问。ARIA HTML 属性在 JSX 中完全受支持，因此可以用作 React 中元素和组件的属性。React 中的大多数 DOM 属性和特性都采用驼峰命名法，而这些属性应该使用连字符命名法。

<input
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

语义 HTML：
语义 HTML 是 Web 应用程序可访问性的基础。有时，当我们<div>向 JSX 添加元素以使我们的 React 代码工作时，我们会破坏 HTML 语义，尤其是在处理列表(<ol>, <ul> and <dl>)和 HTML时<table>，这会导致理解代码并因此调试代码的问题。

因此有时，我们会使用像 <> 这样的部分，或者允许您将子元素列表组合在一起，而无需向 DOM 添加更多节点。

import React, { Fragment } from 'react';
function  employeeList() {
return (
    <Fragment>  
        <dt>EA824412</dt>
        <dd> Sreashi Saha</dd>
    </Fragment> );
}

标签：
标签用于使表单易于访问。每个 HTML 表单控件（例如<input>和<textarea>）都需要添加可访问的标签。在你的应用程序中，你必须提供一项重要内容：为每个控件添加一个文本标签。这为屏幕阅读器用户提供了他们正在交互的控件的上下文。虽然这些标准的 HTML 实践可以直接在 React 中使用，但请注意，for 属性在 JSX 中写为 htmlFor：

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

键盘焦点：
键盘焦点是指 Web 应用程序的一部分，它从用户的键盘接受数据或操作，通常指 DOM 输入。我们可以使用 ref 函数来处理我们希望用户在应用程序中关注的位置。使用 React.createRef() 我们可以控制焦点。

• 使用ref回调存储对文本输入 DOM 的引用
• 创建一个 ref 来存储 textInput DOM 元素

让我们看看如何在组件类的 JSX 中创建对元素的引用。

class CustomDiv extends React.Component {
  constructor(props) {
    super(props);

    this.div = React.createRef();
  }
  render() {

    return (
      <div
        tabIndex= "-1"

        ref={this.div}
      />
    );
  }


}

然后我们可以在需要时将其集中在组件的其他位置：

• 使用原始 DOM API 明确聚焦 div
• 我们正在访问“current”来获取 DOM 节点

focus() {

 this.textInput.current.focus();


}

使用 HOC 扩展组件时，建议使用 React 的 forwardRef 函数将 ref 转发到被包装的组件。如果第三方 HOC 没有实现 ref 转发，上述模式仍然可以作为后备方案。

设置文档标题：

设置文档标题提供了一种在单页应用中指定 document.title 的声明式方法。这对于屏幕阅读器来说至关重要，因为文档标题是屏幕阅读器首先读出的内容。它会更新浏览器选项卡中当前显示的内容，帮助用户准确了解(who might depend on screen readers)应用程序的当前位置。这对于搜索引擎优化也非常有用。设置文档<title>以正确描述当前页面内容，确保用户始终了解当前页面上下文。让我们看一个例子：

function App() {
  return (
    <DocumentTitle title='My Web App'>
      <SomeRouter />
    </DocumentTitle>
  );
}

class NewArticlePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: 'Untitled' };
  }

  render() {
    return (
      <DocumentTitle title={this.state.title}>
        <div>
          <h1>New Article</h1>
          <input
            value={this.state.title}
            onChange={(e) => this.setState({ title: e.target.value })}
          />
        </div>
      </DocumentTitle>
    );
  }

开发援助：
开发援助可以帮助提高您的网站可访问性。

• 为您的 React 项目安装 ESLint jsx-a11y 插件，以显示您在构建应用程序时错过的可访问性规则。

npm install eslint-plugin-jsx-a11y  -— save-dev

• 在代码编辑器中更新 eslint.rc 文件的插件和扩展部分。对于插件部分：

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]

}

希望本文能帮助您提高 React 的编写效率，并提升网站的可访问性。如有任何疑问，请在下方评论区留言。感谢您的参与，希望我的博客对您有所帮助。

学习愉快！！