HTML上线后必须建立回归验证机制，否则微小修改可能破坏可访问性或兼容性；W3C Validator是每次提交前的硬性门槛，需校验完整HTML文件并阻断警告；Puppeteer和Lighthouse需集成CI，将语义、兼容性、辅助技术契约转化为可执行自动化断言。
HTML 代码一旦上线，没有持续的回归验证机制，任何一次看似微小的修改（比如改个 class 名、删个 aria-hidden、调整 form 的 action 路径）都可能在某个浏览器或辅助技术中悄悄失效——而这种问题往往直到用户投诉才被发现。
用 W3C Validator 做基础语法守门人
这不是“可选步骤”，而是每次提交前必须卡住的硬门槛。W3C Markup Validation Service 不只报错 <div> 没闭合，它能揪出更隐蔽的问题：比如 role="button" 放在非交互元素上却没加 tabindex，或 img 缺 alt 又没 role="presentation"，这些都会破坏可访问性链路。
- 把本地 HTML 文件拖进 validator.w3.org/nu，别只粘代码片段——DOM 动态插入的内容不会被校验
- 对 CI 流程，用
curl -F "out=json" -F "doc=@index.html" https://www.php.cn/link/33936698133cfff4e8303e4edb690110获取结构化结果，失败时直接阻断构建 - 注意警告（
Warning）不是可忽略项：例如Article lacks heading或Element X is missing required attribute Y，它们在部分屏幕阅读器中会直接导致内容不可读
用 Puppeteer 精准捕获 DOM 行为漂移
单纯检查静态 HTML 没用。真实风险藏在 JS 操作后的 DOM 状态里：比如点击按钮后 form 是否真的被 submit 了？禁用状态的 input 是否仍能获得焦点？这些必须靠真实浏览器环境验证。
- 写断言时不只查
page.$('button')是否存在，要查await page.$eval('button', el => el.disabled)是否为true - 对表单提交，监听
page.on('request', req => { if (req.method() === 'POST' && req.url().includes('/api/login')) ... })，比等待跳转更可靠 - 避免用
page.waitForTimeout(1000)等待动画；改用page.waitForFunction(() => getComputedStyle(document.querySelector('.loading')).opacity === '0')
用 Chrome DevTools 的 Lighthouse 批量扫兼容性盲区
Lighthouse 不只是性能工具。它的 Accessibility 和 Best Practices 审计项，能暴露 HTML 层面的系统性缺陷：比如所有 h2~h6 都缺失，或 meta name="viewport" 写成 width=device-width, initial-scale=1.0 却漏了 user-scalable=no 导致 iOS 双击放大失效。
立即学习“前端免费学习笔记（深入）”；
- 在 CI 中跑命令行版：
lighthouse http://localhost:3000 --output=json --output-path=report.json --quiet --chrome-flags="--headless=new" --preset=desktop --audit-mode - 重点关注返回 JSON 中
audits['heading-levels'].score === 0或audits['meta-viewport'].score === 0这类硬性失败 - 别依赖默认阈值：把
accessibility分数阈值设为0.95，低于则构建失败——因为 5% 的可访问性缺口，可能意味着某类残障用户完全无法使用
为什么不能只靠人工点一遍？
手动测试能发现字体颜色不一致，但发现不了 aria-live="polite" 区域在 Safari 中被静音、或 inert 属性在 Firefox 115 以下被完全忽略。更关键的是，人工无法保证每次迭代都检查同一组边界条件：比如连续三次快速点击提交按钮是否触发重复请求？表单在输入中文标点后提交是否丢失字段？这些必须固化为自动化断言。
真正卡住质量下限的，从来不是“有没有测”，而是“有没有把 HTML 的语义契约、浏览器兼容契约、辅助技术契约，全部翻译成机器可执行、可比对、可阻断的规则”。否则重构就只是换了个样子的债务转移。
