在前端开发中，我们经常需要使用各种第三方库和工具来提高编码效率和代码质量。而 npm 是现代 JavaScript 应用程序开发的最佳伙伴之一，它是世界上最大的软件注册表，拥有超过 100 万个包，可供我们免费使用。
在这篇文章中，我将介绍一个非常实用的 npm 包 enabled，它可以帮助我们快速检测和修复网页上的无障碍问题，让我们的网站更加友好和易用。
什么是 enabled？
enabled 是一个基于 axe-core 的 npm 包，它可以自动分析页面并报告任何无障碍问题。axe-core 是一个流行的无障碍测试引擎，由 Deque Systems 公司开发，因为它支持多种浏览器和平台，所以是无障碍测试的首选工具之一。
enabled 可以通过命令行运行，也可以嵌入到我们的构建流程中。它还提供了许多自定义选项，可以根据不同的需求进行配置。
安装 enabled
安装 enabled 非常简单，只需要在终端中运行以下命令即可：
--- ------- -- ------------- --- ------- -- ------------------- --- ------- -- -------
其中，@axe-core/cli 和 @daisy/ace-reporter 是 enabled 依赖的 npm 包。
使用 enabled
在终端中输入以下命令可以使用 enabled：
------- -----
例如，要检测 https://www.example.com 网页的无障碍问题，我们只需要在终端中输入以下命令：
------- -----------------------
然后 enabled 会自动分析页面并报告任何无障碍问题。如果没有问题，则输出类似于以下内容：
-- ------------- ---------- -------- -- -----------------------
否则，将显示有关发现的问题的详细信息，例如：
- ------------- ---------- -------- -- -----------------------
-- --------- ---- ---- ----------- ---- -- -----------
-------- --- -- ----------- ----- -------------
-- ------ ---- ---- --------- ---- -- -----------
----- ---- --- ---- -- ----- --------- -- --- ----- --------- -- ----- -- -----
--------
---- ----------------- --这就是 enabled 的基本用法，但它还提供了许多其他可选项和功能，使我们能够根据实际需求进行自定义配置。
配置 enabled
在使用 enabled 之前，我们可以通过创建一个名为 .enablerc 的文件来配置它。该文件应放置在项目的根目录下，并使用 JSON 格式编写。
以下是一些最常用的配置选项：
rules: 指定要运行的 axe-core 规则集。默认情况下，enabled 将使用全部规则。例如，我们可以仅运行 WCAG 2A 规则集：
"rules": "wcag2a"ignore: 忽略某些元素或问题类型。例如，我们可以忽略所有与颜色有关的问题：
"ignore": ["color-contrast"]root: 指定要分析的目录或文件。例如，我们只想检查主页和文章页面：
"root": ["https://www.example.com", "https://www.example.com/articles/*"]
以下是一个示例 .enablerc 文件：
- -------- --------- --------- ------------------- ------- --------------------------- ------------------------------------- -
结论
通过使用 enabled，我们可以轻松地检测和修复网页上的无障碍问题。它是
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/44148