随着 Web 应用程序的不断发展，前端开发变得越来越重要。前端开发人员需要使用许多工具来保证他们的代码能够工作，其中一个关键的方面就是 Web 应用程序的可访问性。
@beardedframework/axe 是一个提供可访问性检查的 npm 包。它提供了一套用于检查 Web 应用程序是否符合各种可访问性标准的规则。在本文中，我们将详细介绍如何使用 @beardedframework/axe 包来检查您的 Web 应用程序的可访问性。
安装 @beardedframework/axe
在使用 @beardedframework/axe 前，您需要将其安装到您的项目中。可以使用 npm 命令进行安装：
npm install @beardedframework/axe
使用 @beardedframework/axe
安装完成后，您需要在代码中引用 @beardedframework/axe 包：
const { axe } = require('@beardedframework/axe');可以使用 axe.run 方法来运行可访问性测试。该方法需要两个参数：要测试的 HTML 文档和一个配置对象。例如：
-- -------------------- ---- -------
----- - --- - - ---------------------------------
----- ---- - -
------
-------------
------
--------
----- ---
---------
-------
-------
--
----- ------ - ---
----- ------- - ----- ------------- --------
---------------------在这个例子中，我们运行了一个简单的 HTML 文档的可访问性测试，并将结果输出到控制台。如果一切正常，您应该会看到以下输出：
-- -------------------- ---- -------
-
-
----- --------------
--------- -----------
------- -
---------
----------
----------
--
-------------- -------- ------- --- ---------------------- -------- ---- ----------- ---- --------
------- -------- --- ------ ---- --------------- ---- ---- ----------- ----- -- -- ----- ------------ --- ---- -- ----- --- --- --------- ---- -------- --- -------- ------- --- ------- ---- ---- -------- ------ ----- --- ---- ----- ------
---------- ---------------------------------------------------------------------------
-------- -
-
----------------- ------- ----- ---- -- ---- ---------
------- ----------- -- -----------
--------- ----------
-
--
-------------- ----
------------ --
------------------- ----
--------------- -
-
-解析结果
可访问性测试的结果是一个数组，其中每个对象都是一个测试的输出。每个输出都包含一组节点，这些节点表示未通过测试的元素。每个节点都包含有关失败原因的信息。
在上述示例中，我们运行了一个有一个未命名的按钮的 HTML 文档。因此，axe 报告了一次失败测试，详情请参阅 nodes 属性。在这个示例中，nodes[0] 包含了有关未通过测试的按钮的所有信息。
结论
现在，您已经熟悉了如何使用 @beardedframework/axe 包来测试您的 HTML 文档的可访问性。使用可访问性测试工具不仅可以帮助您确保您的应用程序遵守可访问性标准，还可以帮助您为所有人提供更好的经验。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6051ab1864dac672a5