使用 reCAPTCHA-axe 和 eslint-plugin-jsx-a11y 进行无障碍功能审核

如果您的 React 网站无法访问，则不是渐进式的。在开发过程中进行审核有助于发现任何问题。

侯赛因·吉尔德

react-axe 是一个库，用于审核 React 应用，并将所有无障碍功能问题记录到 Chrome 开发者工具控制台中。该测试使用开源 axe 测试库来标记任何问题及其严重程度。

eslint-plugin-jsx-a11y 是一个 ESLint 插件，可直接在您的 JSX 中识别并强制执行许多无障碍规则。结合使用此方法与测试最终渲染的 DOM 的工具（如 react-axe）可帮助您查找和解决网站上存在的所有无障碍功能问题。

为什么搜索渠道报告非常实用？

构建的网站应能够让每位用户（无论其有无残损或限制）能够访问其内容，这一点至关重要。在开发 React 应用期间使用 react-axe 和 eslint-plugin-jsx-a11y 等审核库时，系统会在出现无障碍功能问题时自动公开这些问题。

使用 eslint-plugin-jsx-a11y

React 已经支持在 JSX 语法中编写可访问的 HTML 元素。例如，您只需使用 htmlFor 属性（而非 for）将标签与 React 组件中的特定表单元素相关联。

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

React 无障碍功能文档介绍了在 React 组件中处理无障碍功能问题的所有细微差别。为了在开发过程中更容易发现这些问题，Create React App (CRA) 默认包含适用于 ESLint 的 eslint-plugin-jsx-a11y 插件。

如需启用 CRA 提供的预配置 lint 检查，请执行以下操作：

  1. 为代码编辑器安装适当的 ESLint 插件
  2. 将 .eslintrc.json 文件添加到您的项目中
{
  "extends": "react-app"
}

现在会显示一些常见的无障碍功能问题。

linter 中的图片无障碍功能警告

如需检查是否存在更多无障碍规则，请修改该文件以自动包含插件建议的所有规则：

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

如果您希望使用更严格的规则子集，请切换到严格模式：

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

linter 中的标签无障碍功能错误

如需了解推荐模式和严格模式之间的区别，请参阅项目文档。

使用 Reactionaxe

eslint-plugin-jsx-a11y 可帮助您轻松查明 JSX 中的无障碍功能问题，但不会测试任何最终的 HTML 输出。react-axe 库通过为 Deque Labs 的 axe-core 测试工具提供一个 React 封装容器来实现此目的。

将该库作为开发依赖项安装以开始：

npm install --save-dev react-axe

现在，您只需在 index.js 中初始化该模块：

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

此处使用动态导入是为了在渲染和启动根 App 组件之前，仅在库未处于生产模式时加载该库。这样可以确保它不会不必要地包含在最终生产软件包中。

现在，当您在开发期间运行应用时，问题会直接显示在 Chrome 开发者工具控制台中。

Chrome 开发者工具中的 React Axe

系统还会为每种违规行为指定严重级别。这些级别包括：

  • 未成年人
  • 中
  • 严重
  • 严重

总结

  1. 如果您要使用 React 构建网站，请尽早在工作流中包含无障碍功能审核，以便在构建组件时发现问题。
  2. 您可以使用 eslint-plugin-jsx-a11y 向执行 lint 请求的流程添加无障碍功能检查。CRA 已包含，但会切换到推荐模式或严格模式。
  3. 除了本地开发测试之外，还应将 react-axe 添加到您的应用中，以发现最终渲染的 DOM 中存在的任何问题。请勿将其添加到您的生产软件包中。