在前端开发中，我们经常需要对我们的网站进行无障碍访问测试。然而，手动进行这些测试的工作量非常大，效率也不高。在这个时候，npm 包 pa11y-express-render 就成了我们的好朋友。
什么是 pa11y-express-render
pa11y-express-render 是一个快速捕捉无障碍问题的工具，它能够随后隐藏掉 DOM 元素的样式，并使用默认的浏览器样式来检查它们是否包含无障碍问题。
使用 pa11y-express-render
首先，你需要安装 pa11y-express-render，可以使用以下命令：
npm install pa11y-express-render --save-dev
随后，在你的 Express 应用程序中，你需要将 pa11y-express-render 作为中间件来处理每个请求，如下所示：
const express = require('express');
const pa11yExpressRender = require('pa11y-express-render');
const app = express();
app.use(pa11yExpressRender());pa11y-express-render 这个函数会返回一个 Express 中间件函数，用于捕获请求并检查是否存在无障碍问题。默认情况下，中间件会将 HTML 和 CSS 作为字符串从请求中提取出来，并将其传递给 pa11y.A11y()。然后，pa11y-express-render 会返回带有无障碍错误的 JSON 对象。
你可以在你的应用程序中添加一些自定义的选项和配置。例如，以下代码演示了如何将自定义选项传递给 pa11y.A11y()：
-- -------------------- ---- -------
----- ------------------ - --------------------------------
----- ----- - -----------------
----- ----------- - -
-------- --------
------- -
------------------------------------------------
--
----------- -
------- --
-------- --
------ --
-
--
----- ------- - -
-- ------ ------ ----- -------
------------- ------------
--
-------------------------------------其中，我们将传递给 pa11y.A11y() 的 runners、ignore 和 thresholds 属性进行了自定义。你可以在 pa11y 的文档中找到更多详细信息。
示例代码
以下是一些相关的示例代码，演示如何使用 pa11y-express-render：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------------ - --------------------------------
----- --- - ----------
-- --- -------------------- -- ----------
------------------------------
-- ------ - -----
------------ ----- ---- -- -
----- ---- - -
--------- -----
------
------
------------ ------- --------------
-------
------
--------- ------- -----------
-------
-------
--
-- ---- - --------
---------------
---
-- ----- --- ------
---------------- -- -- -
------------------- ------- -- ------------------------
---在上述代码中，我们定义了一个简单的 Express 应用程序，并添加了 pa11y-express-render 作为中间件。我们还定义了一个路由来响应访问根目录的请求，并返回一个简单的 HTML 页面。
结论
通过使用 pa11y-express-render，我们可以轻松检查我们的网站是否包含无障碍问题。我们可以自定义选项和配置，以便为我们的应用程序定义特殊的无障碍错误。此外，你还可以使用 pa11y-express-render 来简化你的自动化测试流程。我希望这篇文章能够帮助你使用这个工具，并找到一个简单的方式来确保你的网站对于所有人都能够访问。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597881e8991b448d701c