构建阶段用html-validate拦截红牌问题（img缺alt、交互元素缺aria-label、表单控件缺label），支持行号定位、集成vite/webpack、输出可追溯dom节点，是比运行时检查更高效的html可访问性保障手段。
构建阶段就能发现可访问性问题，比上线后被 QA 或用户反馈再修要高效得多。关键不是等 CI 跑完才看报告，而是让错误在本地开发时就浮出来，且定位到具体 DOM 节点和行号。
用 html-validate 在构建流程中拦截红牌问题
红牌问题（img 缺 alt、交互元素缺 aria-label、表单控件缺 label）必须可自动化校验，html-validate 是目前最贴合这个需求的工具。它支持自定义规则、输出行号、能集成进 Webpack/Vite 构建流程，且规则与 axe-core 一致，CI 报告可直接映射到团队红黄牌制度。
- 安装：
npm install --save-dev html-validate - 配置
.htmlvalidate.json，启用三类红牌规则："require-alt-attribute"、"require-aria-label"、"require-label-attribute" - Vite 项目可在
vite.config.ts中用html-validate插件，在build.rollupOptions.plugins里注入；Webpack 则用html-validate-loader绑定.html和.vue模板文件 - 注意：若项目含
dangerouslySetInnerHTML或服务端渲染内容，需在 hydration 后再运行校验，否则会漏掉动态注入的无效 HTML
为什么不能只靠浏览器开发者工具检查
DevTools 的 Lighthouse 或 axe DevTools 是运行时检查，依赖当前 DOM 快照。但构建阶段的 HTML 模板可能和最终 hydrate 后的 DOM 不一致——比如 React 组件内用 innerHTML 插入了无 alt 的 img，Lighthouse 看得见，但构建检查若只扫原始模板就看不见。所以构建期检查必须作用于「实际参与渲染的 HTML 字符串」，而不是静态文件本身。
- 对 SSR 项目，需在生成 HTML 后、写入磁盘前调用
html-validate校验字符串 - 对纯客户端渲染（CSR）项目，校验点应放在构建产物中提取出的
index.html及所有内联模板（如 Vue 单文件组件中的<template></template>） - 避免把校验塞在
prettier或eslint钩子里——它们不理解 HTML 语义结构，无法判断alt=""是否合理，也无法识别role="presentation"的绕过逻辑
CI 报告必须带可追溯的 DOM 节点定位
报错信息光写“img 缺失 alt”没用，开发没法快速修复。构建输出必须精确到文件路径、行号、列号，并附带出问题的 HTML 片段快照。
- 配置
html-validate的output为"json"或"unix"格式，确保 CI 日志里有line和column - 在 CI 脚本中加一步：用
sed或简单脚本从源码中截取报错行前后 2 行，生成带行号的 HTML 片段，存为 artifact - 禁止出现“该页面存在 3 个红牌”这类模糊描述；必须是
<img src="icon.svg"> (src/components/Header.vue:42:15) - 修复后，PR 描述里要手动引用对应节点的 commit hash，否则质量看板不标记为已解决
最容易被忽略的是动态内容场景：一个 v-for 渲染的图片列表，如果某次数据为空导致 alt 未绑定，构建期模板校验根本捕获不到——这需要结合运行时监控（如监听 error 事件 + 上报缺失 alt 的 src）补位。构建预警只是第一道防线，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
