在前端开发的过程中，我们需要保证网站的无障碍性，也就是 Accessibility（缩写为 a11y），确保所有用户都可以平等地访问网站内容。为了简化这一过程，我们可以使用 pa11y 这款开源的 a11y 测试工具，并使用 pa11y-reporter-cli 这个 npm 包来生成测试报告。
本文将介绍如何使用 pa11y-reporter-cli，以及如何将测试结果以表格形式展示。
安装和使用
首先，我们需要全局安装 pa11y 和 pa11y-reporter-cli：
--- ------- -- ----- ------------------
接下来，我们创建一个测试脚本 test.js，内容如下：
----- ----- - -----------------
----- -------- - ----- ----- -- -
----- ------- - ----- ---------- -
---------- --------
---
------ --------
--
-------------------------------------------------- -- -
-----------------------------
---在 test.js 同级目录下执行以下命令即可运行测试：
---- -------
执行后，我们将看到如下输出：
- - ----- -------- --- -- - ----- ---------- --- -- --- -
其中，每个对象表示一个测试结果。可以分别查看 type、code、context、message、selector 等属性，以便更详细地了解测试结果。
生成表格形式测试报告
以上输出格式虽然方便快捷，但不易于阅读。我们可以使用 pa11y-reporter-html5-table 这个 npm 包生成表格形式的测试报告。
首先，我们需要安装包：
--- ------- -- -------------------------
接下来，修改 test.js：
----- ----- - -----------------
----- ------------- - -------------------------------------
----- -------- - ----- ----- -- -
----- ------- - ----- ---------- -
---------- ----------------
---
------ --------
--
-------------------------------------------------- -- -
-------------------------------------
---这样，我们就可以得到如下输出：
-
------- --
---------- ---
---------- -
------- --
--------- --
------ --
----------- ---
--------- --
--
--------- -----------------------------
-其中的 report 字段就是测试报告。如果我们在浏览器中打开该文件，即可看到生成的表格形式测试报告。报告中包含一个可排序的表格，显示了测试结果的各个属性及其分析。
结论
本文介绍了如何使用 pa11y 执行无障碍性测试，并使用 pa11y-reporter-cli 生成测试报告。通过 pa11y-reporter-html-table 可以生成表格形式的测试报告，方便阅读和分析。我们希望这篇文章可以帮助前端开发者更好地完成无障碍性测试工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedada2b5cbfe1ea0610ccd