开发者问题收集

如何使用 Node.js 检查原始 HTML 代码（而不是 URI）的可访问性？

2023-05-20
219
html node.js accessibility pa11y

我需要检查 HTML 代码的可访问性，如下所示：

  1. 我需要 Node.js API（函数类），而不是 CLI。
  2. 我想将 HTML 字符串作为参数传递，而不是文件路径的 URI。

应该是这样的： 

import AccessibilityInspector from "package-which_i_need";

AccessibilityInspector.inspect({
  rawHTML_Code: `<!doctypehtml><html lang=en><meta charset=utf-8><title>title</title><link href=style.css rel=stylesheet><script src=script.js></script>`,
  standard: "WCAG2AAA"
}).
   then((issues: Array<AccessibilityInspector.Issue>): void => {
     // Log the issues
   }).
   catch((error: unknown) => {
     console.error(error);
   })

以下包不满足上述条件：

  • pa11y 仅接受 URI 作为第一个参数，而不接受 HTML 代码。
  • 根据文档， access-sniff 也仅接受 URI。虽然也可以传递原始 HTML，但可能会出现“模式太长”的不明确错误。此外， access-sniff 存在许多漏洞，并且无人维护。

还有其他选择吗？

2个回答

pa11y 有两种操作模式：通过 URL 从网页获取内容，或直接从提供的 browser 和 page 实例获取内容，而无需发出 HTTP 请求。该行为由 ignoreUrl 参数控制，默认情况下为 false 。

直接从 browser 和 page 获取内容>

借助 puppeteer ，您可以创建 browser 和 page 实例并将它们提供给 pa11y 。您需要将 ignoreUrl 设置为 true ： 

import puppeteer from 'puppeteer'
import pa11y from 'pa11y'

// Here comes your raw HTML code
const htmlCode = '<html><body>Hello world!</body></html>'

async function main() {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.setContent(htmlCode, {
    waitUntil: 'domcontentloaded',
  })

  const url = page.url()
  const a11y = await pa11y(url, {
    ignoreUrl: true,
    browser,
    page,
  })

  console.log(a11y)

  await browser.close()
}

main()

从本地服务器托管的网页获取内容

或者，您可以启动一个本地服务器，该服务器将使用 HTML 代码响应任何请求，从而有效地使用所述 HTML 代码创建您自己的临时网站。

这完全可以使用内置的 http 模块来实现，尽管这种方式更麻烦。以下实现使用 express ： 

import { type Server } from 'http'
import express = require('express')
import pa11y = require('pa11y')

// Here comes your raw HTML code
const htmlCode = '<html><body>Hello world!</body></html>'

function getPort(server: Server) {
  const address = server.address()!

  if (address instanceof Object) {
    return address.port
  }

  return address.split(':').at(-1)!
}

const server = express()
  .use((req, res) => res.send(htmlCode))
  .listen(async () => {
    const port = getPort(server)
    const a11y = await pa11y(`http://localhost:${port}`)

    console.log(a11y)

    server.close()
  })

请注意，服务器连接到当时可用的任何端口，这就是我们必须使用 getPort 函数（或类似函数）的原因。

Parzh from Ukraine
2023-05-20

Run an accessibility test against a file (absolute paths only, not relative): 

pa11y ./path/to/your/file.html

您可以执行以下操作： 

const { exec } = require("child_process");

function run() {
    exec("pa11y ./path/to/your/file.html", (error, stdout, stderr) => {
    if (error) {
        console.log(`[ERROR] openCashDrawer: ${error.message}`);
        return;
    }
    
    if (stderr) {
        console.log(`[STDERROR] openCashDrawer: ${stderr}`);
        return;
    }

    console.log(`openCashDrawer: ${stdout}`); // Output response from the terminal
    });
}
Ronnie Royston
2023-05-20