如何通过Node.js API检测原始HTML代码（非URI）的可访问性？

1. axe-core + jsdom #

axe-core是行业通用的可访问性检测标准库，本身依赖DOM环境，结合jsdom可在Node.js中直接传入HTML字符串完成检测，完全匹配你的需求。

安装依赖 #

npm install axe-core jsdom

调用示例 #

import { JSDOM } from 'jsdom';
import axe from 'axe-core';

class AccessibilityInspector {
  static async inspect({ rawHTML_Code, standard }: { rawHTML_Code: string; standard: string }) {
    const dom = new JSDOM(rawHTML_Code);
    const { window } = dom;
    
    // 在DOM环境中运行axe检测
    await axe.run(window.document, {
      runOnly: {
        type: 'tag',
        values: [standard.toLowerCase()]
      }
    });
    
    const results = axe.getResults();
    // 格式化返回结果为你期望的结构
    return results.violations.map(violation => ({
      id: violation.id,
      severity: violation.severity,
      description: violation.description,
      helpInfo: violation.help,
      affectedNodes: violation.nodes.map(node => node.html)
    }));
  }
}

// 使用示例
AccessibilityInspector.inspect({
  rawHTML_Code: `<!doctype html><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 => {
  console.log('检测到的可访问性问题:', issues);
})
.catch(error => {
  console.error(error);
});

2. html-validate #

html-validate专注于HTML代码规范与可访问性校验，支持直接传入HTML字符串，内置WCAG全系列规则集，API调用简洁。

安装依赖 #

npm install html-validate

调用示例 #

import { validateString } from 'html-validate';

class AccessibilityInspector {
  static inspect({ rawHTML_Code, standard }: { rawHTML_Code: string; standard: string }) {
    const config = {
      extends: [standard.toLowerCase()], // 支持wcag2a、wcag2aa、wcag2aaa
      rules: {}
    };
    
    const results = validateString(rawHTML_Code, config);
    // 转换为你期望的Issue结构
    return results.errors.map(error => ({
      id: error.ruleId,
      severity: error.severity,
      description: error.message,
      line: error.line,
      column: error.column
    }));
  }
}

// 使用示例
AccessibilityInspector.inspect({
  rawHTML_Code: `<!doctype html><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 => {
  console.log('检测到的可访问性问题:', issues);
})
.catch(error => {
  console.error(error);
});

以上两个方案均满足你的核心要求：

• 基于Node.js API调用，无需CLI工具
• 直接接收HTML字符串作为输入参数
• 支持指定WCAG系列检测标准

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD