前言
在开发 Web 应用程序时，我们需要确保我们的应用程序能够被所有人使用，包括那些可能面临一些特殊障碍的人。这就是为什么无障碍检查非常重要的原因。 在这篇文章中，我们将介绍如何通过 AXE Karma 集成来实现无障碍检查。
AXE Karma 集成
AXE 是一种用于检查 web 页面无障碍的工具，该工具可以与 Karma 集成使用，用于自动化检查。 Karma 是一种测试运行程序，可让您在不同的浏览器和配置下运行测试。
在接下来的指导中，我们将使用 JavaScript 和 Karma 配置文件来集成 AXE。
安装依赖
在开头，需要安装一些必要的依赖项：
npm i karma karma-chrome-launcher karma-jasmine karma-spec-reporter karma-axe-reporter axe-core@^3.5.2
说明：
- karma：测试运行程序
- karma-chrome-launcher：在 Chrome 浏览器中运行测试
- karma-jasmine：使用 Jasmine 作为我们的测试框架
- karma-spec-reporter：使用 karma-spec-reporter 作为我们的测试报告器
- karma-axe-reporter：使用 karma-axe-reporter 作为我们的无障碍测试报告器.
- axe-core：用于无障碍检查的核心库。
设置 Karma 配置文件
接下来，我们需要配置 Karma 文件，打开 karma.conf.js 并将其更新为以下配置：
-- -------------------- ---- -------
-------------- - -------- -------- -
------------
--------- ----
----------- ------------
------ -
-- --------
-------------------
--
---------- -------- -------
----- -----
------- -----
--------- ----------------
---------- -----
--------- -----------
---------- ------
------- -
-------- -
------- -----
-
--
-- ------
-------- -
------------------------------------
------------------------
----------------
---------------------
--
-- ------
---------------- -
------------------------ -
----- -----------------
------ -
--------------- -- ----------------- -------- ----
------------------------- -- ------------
---------------- -- ------- --- --
-----------------------
-------------------------- -- - -------- ------ ----- ---
--
--
--
--
-在上面的代码中，我们将添加 AXE reporter 和 Chrome 浏览器的 Headless 模式以便测试期间快速打开新浏览器窗口。
创建一个示例测试
接下来，我们将创建一个包含两个漏斗测试的示例 JavaScript 文件。
-- -------------------- ---- -------
------------------- -------- -- -
-- -------
------------------ -------- ------ -
--- -
----------------- -------- ----- -------- -
-- ----- ----- ---
-----------------------------------------
------
--
- ----- ----- -
--------------
-
--
-- -------
------ ----- ------ ------- -------- ------ -
--- -
----------------- -------- ----- -------- -
-- ----- ----- ---
----- ------ - --------------------------- -- ---- --- ---------------------
-----------------------------
------
--
- ----- ----- -
--------------
-
--
--在我们的测试代码中，我们使用了 AXE 库来运行测试。我们运行了两个测试：
- 我们检查页面中是否存在低对比度元素。如果任何元素具有低对比度，则测试将失败。
- 我们检查页面上的所有输入元素是否都有相应的标签（指定了
for属性）。 如果任何元素没有配对的标签，则测试将失败。
运行测试
现在我们已经准备好运行我们的测试了。在命令行中使用以下命令：
karma start
如果一切正常，Karma 将会打开一个新的 Chrome 浏览器窗口，然后运行测试。
如果出现与检查无障碍的任何问题，测试运行程序将会在控制台中记录这些问题。
总结
无障碍检查非常重要，可以帮助我们确保我们的 Web 应用程序是对所有用户都友好的，无论他们是否面临障碍。在本文中，我们介绍了如何通过 AXE Karma 集成来实现无障碍检查。我们通过配置 Karma 文件并编写示例测试来实现了这一点。这样您的 Web 应用程序就可以经过无障碍测试了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffb4df95b1f8cacde03fbc