htmlhint 必须显式启用 alt-require 和 input-requires-label 规则，否则不检查可访问性；其与 axe 各司其职：前者检模板缺陷，后者查运行时 dom；w3c 验证器不校验可访问性，ci 中 htmlhint 失败需阻断，axe 结果需人工复核。
HTMLHint 必须显式启用可访问性规则，否则不检查
装了 HTMLHint 插件或 CLI 工具，不代表可访问性检查就自动生效。默认情况下，alt-require 和 input-requires-label 这两条关键规则是关闭的——不配置，等于没开。
在项目根目录的 .htmlhintrc 文件中，必须明确写入：
{
"rules": {
"alt-require": true,
"input-requires-label": true
}
}
常见错误包括：
- 只写了
"alt-require": true却漏掉input-requires-label，导致表单控件漏检 - 把配置放在
.htmlhintignore或其他非标准路径下，HTMLHint 根本读不到 - 用
npm run lint调用时未指定配置文件路径，CLI 默认 fallback 到空规则集
iframe 沙箱环境里，HTMLHint 无法运行但 axe 可以
如果你把用户提交的 HTML 注入到带 sandbox 属性的 <iframe></iframe> 中做隔离渲染，那 HTMLHint 就没法在 iframe 内执行——它依赖 Node.js 或构建时静态分析，不是浏览器端脚本。
此时真正能跑起来的是 axe：它注入到运行后的 DOM 中，检查最终渲染状态。所以：
- HTMLHint 在 pre-commit 或 CI 构建阶段拦截模板级缺陷（如
<img>缺alt） - axe 在 iframe 加载完成后调用
await axe.run(iframe.contentDocument)，捕获动态插入内容的可访问性问题 - 二者不能互换，必须共存；缺 HTMLHint，漏掉源码硬伤；缺 axe，看不见 JS 渲染后的新
<input>没包<label></label>
W3C 验证器对可访问性完全无感
https://validator.w3.org/ 只校验语法合法性，不关心语义或辅助技术支持。一个 <img src="logo.svg"> 会被标为“valid”，哪怕它让屏幕阅读器彻底失明。
这意味着：
- W3C 通过 ≠ 可访问，更 ≠ 合规（WCAG AA 级）
- 即使你把所有标签都闭合、属性加引号、DOCTYPE 写全，
alt和label缺失照样逃过验证 - 把它当“绿灯”放进 CI，等于给可访问性埋雷——上线后 axe 一扫全是严重项
CI 流程中 HTMLHint 失败必须阻断，axe 失败需人工确认
HTMLHint 报错（如 Element img is missing required attribute alt）是确定性缺陷，必须修复才能合入主干。axe 的结果则不同：
- 它可能报出
"Image has no alternative text"，但该图实际是装饰性（应设alt=""），需要人判断上下文 - 它检测到
aria-live区域未声明，但业务逻辑可能确实不需要实时播报 - 所以 CI 脚本里应分开处理：HTMLHint 错误直接
exit 1；axe 结果输出 JSON 并标记为 warning，由 QA 或无障碍专员复核
最易被忽略的一点：沙箱 iframe 的 sandbox 属性本身会禁用 document.write 和同步脚本，而 axe 的注入依赖这些能力。若 iframe 开了 allow-scripts 却没开 allow-popups（某些版本 axe 需要临时弹窗做 DOM 访问），axe.run() 会静默失败——得先验证 iframe.contentWindow 是否可访问、是否加载完成，再调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
