编译时插件能提前拦截img缺alt、input未配label、div模拟button缺role="button"、aria-*拼写错误及role值非法等模板结构缺陷。这些在HTML模板生成最终代码前就被卡住，避免上线后被axe扫描才发现，修复成本更低。
编译时插件能提前拦截哪些 a11y 问题
编译时插件不是在浏览器里跑检查，而是在 HTML 模板生成最终代码前就介入。它能卡住的典型问题包括：img 缺 alt、input 没配 label、button 用 div 模拟却没补 role="button"、aria-* 属性拼写错误（如 aria-lable）、role 值非法（如 role="buton"）。这些都不是运行时逻辑错误，而是模板结构缺陷——编译时发现，比上线后被 axe 扫出来更省事。
Webpack + html-webpack-plugin 配合 eslint-plugin-jsx-a11y
如果你用 Webpack 构建静态 HTML 或服务端渲染入口，html-webpack-plugin 是常用入口。但它本身不校验语义，得靠 eslint-plugin-jsx-a11y ——别被名字骗了，它也支持纯 HTML 字符串校验（只要配置正确）。
- 安装：运行
npm install --save-dev eslint eslint-plugin-jsx-a11y - 在项目根目录加
.eslintrc.js，启用关键规则："jsx-a11y/alt-text"、"jsx-a11y/label-has-associated-control"、"jsx-a11y/role-has-required-aria-props" - 关键一步：修改
html-webpack-plugin配置，把模板内容传给 ESLint 处理。需用templateParameters或自定义compiler函数，在注入前调用CLIEngine校验字符串 - 注意：ESLint 默认只处理
.js和.jsx，要让它读.html，得在overrides里显式声明files: ["*.html"]并指定处理器
Nunjucks 模板用 nunjucks-lint + 自定义 rule
nunjucks-lint 本身不带 a11y 规则，但支持加载自定义 rule。你可以写一个简单 rule，扫描输出的 HTML 片段（不是原始模板），匹配 <img[^>]*> 但不含 alt= 的标签。
- rule 文件导出函数，接收
ast（Nunjucks 解析后的节点）和source（渲染后 HTML 字符串） - 用正则或
parse5解析source，查img标签缺失alt或alt值为空白字符串 - 报错时定位到 Nunjucks 模板行号，靠
ast的line属性映射 - CI 中运行
nunjucks-lint --rules-dir ./rules/ templates/，失败则阻断构建
为什么不能只靠 VS Code 插件
VS Code 插件（比如 Web Accessibility 或 axe DevTools）是编辑时提示，但它们依赖文件保存触发，且不介入构建流程。开发人员可能跳过保存、绕过提示、或在 CI 环境里根本没装插件。编译时插件强制所有分支都过同一道关——哪怕 PR 提交的是 .njk 文件，CI 跑 npm run build 就会失败。真正卡住的是“没写 alt 却合并进主干”这件事，而不是“开发者没看到波浪线”。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：编译时校验必须基于**渲染后的真实 HTML 结构**，而非模板语法。比如 Nunjucks 的 {% if showImage %}<img src="{{url}}">{% endif %}，插件得展开条件、拼出实际 HTML 再扫，否则会漏掉动态分支里的 a11y 缺陷。
