怎么借助工程化配置实现HTML代码静态检查与可访问性自动纠错-html教程-PHP中文网

不能。html-validate 默认只处理 .html 文件，需通过 webpack 或 vite 插件解析 .vue 中的 template；装饰性图片应使用 alt="" 或语义化替代方案；ci 中须设 --max-warnings 0 或规则为 error 级别；必须是的直接子元素以满足屏幕阅读器要求。

怎么借助工程化配置实现html代码静态检查与可访问性自动纠错

html-validate 能否直接扫描 .vue 文件里的模板？

不能。默认情况下 html-validate 只处理后缀为 .html 的文件，对 .vue 或 .tsx 中的 HTML 片段完全无感——它压根不解析这些文件的模板块。

必须配合构建工具插件才能介入：

html-validate-loader（Webpack）：在 vue-loader 之后注入，把 <template></template> 提取为临时 HTML 字符串再校验
vite-plugin-html-validate（Vite）：监听 .vue 文件变更，调用 html-validate API 对解析出的 AST 模板节点执行规则
别指望 npx html-validate src/**/*.vue 命令生效——它只会报“no files matched”

alt-require 报错但图片确实不需要文字描述怎么办？

强制所有 <img> 都带 alt 是可访问性底线，但装饰性图片（如分隔线、纯图标）例外。硬编码 alt="" 会触发屏幕阅读器跳过，这是正确做法；写 alt="spacer" 反而是错误。

解决方案不是关规则，而是用语义化方式绕过校验：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

装饰图改用 <div role="presentation" aria-hidden="true"></div> + CSS 背景图
图标类图片统一走 <svg></svg> 内联，避免 <img> 标签
若必须保留 <img>，则只允许空字符串：alt=""，并在 .htmlvalidate.json 中配置 "attr-req-alt": { "allowEmpty": true }
严禁使用 alt=" decorative " 或 alt="icon" 等无效值，axe-core 会标记为 aria-input-field-name 失败

CI 中 html-validate 失败却不阻断 PR 合并？

最常见原因是漏了 --max-warnings 0 参数。html-validate 默认容忍警告（warning），只把错误（error）当失败——而多数可访问性规则（如 attr-req-alt）默认是 warning 级别。

必须显式升级为硬性拦截：

CI 脚本里写死：npx html-validate --config .htmlvalidate.json --max-warnings 0 --format json src/**/*.html
在 .htmlvalidate.json 中把关键规则设为 error："rules": {"attr-req-alt": "error", "attr-req-href": "error"}
不要把 html-lint job 和 build job 绑定依赖——应独立运行、独立失败，否则构建失败时 lint 根本不执行
GitHub Actions 示例中常见陷阱：用了 if: always() 却没加 continue-on-error: false，导致失败被忽略

为什么 `<main></main>` 必须是的直接子元素？

这不是 W3C 的“建议”，而是屏幕阅读器实际行为的硬约束。NVDA、VoiceOver 等工具靠 DOM 层级定位 <main></main>，一旦它被包在 <div class="container"> 里，就会被跳过或报 <code>landmark-no-main critical 错误。

工程化拦截要点：

用 html-validate 的 semantic-elements 规则，配 "main": {"required": true, "unique": true, "directChildOfBody": true}
Vue/React 项目中禁止子组件输出 <main></main>，由根布局组件统一控制
SSR 模板里检查 <main></main> 是否出现在开始后、首个非注释节点位置，避免 <main></main> 这类写法
别信“浏览器能渲染就行”——可访问性测试工具（axe-core）会在 CI 中直接 fail，且无法通过视觉回归掩盖

真正难的不是让工具跑起来，而是让 lang="zh-CN"、<main></main> 唯一性、标题层级连续这三件事，在每个新提交的 HTML 片段里自动成立——它们不靠人记，只靠配置焊死。