html-validate是校验缺失alt和aria-label等无障碍问题的首选工具，需启用img-alt-req、svg-title-req、button-name-req等规则并设为error级别，配合--format json输出供ci解析，静态扫描需与playwright/puppeteer运行时校验协同覆盖动态内容。
用 html-validate 检查缺失 alt 和 aria-label 的非文字内容
html-validate 是目前最适配 CI 流水线的 HTML 语义校验工具，它能直接报出 <img> 缺 alt、<svg></svg> 缺 aria-hidden 或 aria-label、<button></button> 无可访问名称等缺陷。它不依赖浏览器运行，解析快、规则可定制、输出易集成。
关键配置项必须启用：
-
"img-alt-req": true—— 强制所有<img>必须有alt（装饰性图片需显式写alt=""） -
"svg-title-req": true—— 要求<svg></svg>内含<:title>或带aria-label/aria-labelledby -
"button-name-req": true—— 阻止无文本、无aria-label、无aria-labelledby的<button></button> -
"no-unknown-attributes": true—— 防止误用aria-lable这类拼写错误属性（注意不是aria-label）
本地验证命令：npx html-validate --config .htmlvalidate.json src/**/*.html；CI 中必须加 --format json，方便后续脚本提取 error 行号并贴到 PR comment。
HTMLHint 不能替代 html-validate 做可访问性拦截
HTMLHint 默认规则对可访问性覆盖极弱：img-alt-req 规则在多数版本里是 warning 级别，且不检查 <svg></svg>、<icon></icon>、<button></button> 等非 <img> 元素。更麻烦的是，它默认不因 warning 退出，npx htmlhint src/*.html 即使报出 20 条缺失 alt，CI 仍返回 0 —— 流水线静默通过。
若坚持用 HTMLHint，必须同时满足三件事：
- 配置文件中设
"img-alt-req": "error"（不是true） - 命令行加
--fail-on-warn（否则 warning 不触发失败） - 手动补全规则：HTMLHint 不原生支持
svg-title-req或button-name-req，得靠自定义插件或放弃
结论：用 HTMLHint 守风格，别让它扛可访问性责任；把 alt、aria-label、aria-hidden 这类硬性语义要求交给 html-validate。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
Playwright 运行时校验补静态分析的漏网之鱼
静态工具扫不到 JS 动态插入的非文字内容，比如 React 渲染的 <icon name="close"></icon> 最终输出为 <svg>...</svg>，但源码里没 <svg></svg> 标签。这类内容必须在浏览器中真实渲染后检查。
Playwright 可这样补位：
- 定位所有
<svg></svg>并断言其可访问性：await expect(page.locator('svg:not([aria-hidden="true"]):not([aria-label]):not([aria-labelledby])')).toHaveCount(0) - 检查 icon font 元素（如
<i class="icon-close"></i>）是否带aria-hidden="true"或aria-label - 对
<canvas></canvas>或<video></video>等媒体元素，用page.evaluate()拿到 DOM 节点后判断是否含aria-label或title
注意：page.on('response') 拦不到 SVG 内联内容，也捕获不了 JS 注入的 aria 属性变更，必须用 locator + expect 主动查 DOM 状态。
CI 流水线里怎么真正卡住问题而不是只报日志
常见失效模式是工具跑完但 job 不失败。根本原因只有两个：退出码被吞掉，或规则没设成 error 级别。
确保三点落地：
- 删掉所有
|| true—— GitHub Actions / GitLab CI 里- npx html-validate ... || true直接废掉拦截能力 - 配置
.htmlvalidate.json里"extends": ["html-validate:recommended"]后，再显式覆盖"rules": { "img-alt-req": "error", "svg-title-req": "error" } - GitHub Actions 中该步骤必须加
if: always()，否则 job 失败时后续 steps（如发评论）被跳过，开发者根本看不到哪行缺 alt
最容易被忽略的是：静态校验只管 HTML 文件本身，但 CMS 输出、SSR 模板、构建时注入的 HTML 片段，可能完全绕过这层检查。这类动态 HTML 必须用 Puppeteer 或 Playwright 预渲染后再喂给 html-validate，否则永远漏检。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
