如果您的 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 检查,请执行以下操作:
- 为代码编辑器安装适当的 ESLint 插件
- 将
.eslintrc.json
文件添加到您的项目中
{
"extends": "react-app"
}
现在会显示一些常见的无障碍功能问题。
如需检查是否存在更多无障碍规则,请修改该文件以自动包含插件建议的所有规则:
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"]
}
如果您希望使用更严格的规则子集,请切换到严格模式:
{
"extends": ["react-app", "plugin:jsx-a11y/strict"]
}
如需了解推荐模式和严格模式之间的区别,请参阅项目文档。
使用 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 开发者工具控制台中。
系统还会为每种违规行为指定严重级别。这些级别包括:
- 未成年人
- 中
- 严重
- 严重
总结
- 如果您要使用 React 构建网站,请尽早在工作流中包含无障碍功能审核,以便在构建组件时发现问题。
- 您可以使用
eslint-plugin-jsx-a11y
向执行 lint 请求的流程添加无障碍功能检查。CRA 已包含,但会切换到推荐模式或严格模式。 - 除了本地开发测试之外,还应将
react-axe
添加到您的应用中,以发现最终渲染的 DOM 中存在的任何问题。请勿将其添加到您的生产软件包中。