模板引擎编译期不适合做a11y自动修复，因其无法可靠推断语义与上下文：看不到图片用途以确定alt值、无法判断role是否冗余、不能跨标签验证label关联，且颜色对比度、焦点顺序等不在HTML字符串层面表达。
不能直接在模板引擎里“内置”自动修复可访问性错误的编译器规则——因为可访问性（a11y）问题本质是语义与上下文强相关的，而模板引擎编译阶段无法可靠推断用户意图、内容含义或运行时环境。
为什么模板引擎编译期不适合做a11y自动修复
模板引擎（如 EJS、Nunjucks、Handlebars、Vue SFC 的 template 编译阶段）只处理静态结构或有限逻辑，它看不到：
-
alt该填什么：是空字符串alt=""（装饰性图），还是具体描述（信息性图）？编译器没法判断图片用途 -
role和aria-属性是否冗余：比如给button加role="button"是错误的，但模板里写死就可能出错 - 表单控件是否缺失
label关联：for和id是否匹配，需跨标签分析，编译器通常不建模 DOM 关系 - 颜色对比度、焦点顺序、动态内容更新等——这些根本不在 HTML 字符串层面表达
真正可行的集成点：构建时 + 开发时检查
把可访问性检查前移到能获取更多上下文的位置，而不是塞进模板编译器：
- 用
eslint-plugin-jsx-a11y（React）或@axe-core/webdriverjs（端到端）在代码提交或 CI 中拦截硬伤，比如img缺alt、form缺label - 对 Nunjucks/EJS 模板，用
htmlhint配合自定义规则（如强制img[alt]、禁止tabindex="0"乱用），通过htmlhint "**/*.html"扫描生成前的原始模板文件 - 在 Webpack/Vite 插件中 hook
transform阶段，对模板渲染后的 HTML 字符串调用axe-core的runPartial做轻量级语义检查（非修复，只报错） - 若用 Vue 或 Svelte，启用其官方 a11y 检查（
vue-eslint-parser+eslint-plugin-vue的a11y-规则；Svelte 的accessibilitycompiler warning）
哪些“修复”可以安全自动化（且建议做）
仅限无歧义、符合规范、不改变语义的机械补全——这类操作可放在构建后处理环节，而非模板编译器内部：
立即学习“前端免费学习笔记（深入）”；
- 补全自闭合标签：把
<img src="x">→<img src="x" />（仅 XHTML 模式下有意义，HTML5 不需要） - 为属性值加引号：把
class=header→class="header"（tidy-html5 -m --quote-attributes always可做） - 补
<meta charset="utf-8">（若缺失且文档开头无 BOM） - 移除已废弃的
align、border等呈现属性（用html-validate的no-deprecated-attr规则）
注意：alt="" 这类“修复”必须由人确认——自动填空会掩盖真实问题，反而降低可访问性。
容易被忽略的边界：服务端模板 vs 客户端渲染
服务端模板（如 PHP Twig、Nunjucks）生成的 HTML 若含动态插值（{{ user.avatar }}），alt 值来自数据层，修复逻辑必须下沉到业务代码——比如模板里写 <img src="{{ avatar }}" alt="{{ avatarAlt|default(''') }}">，而 avatarAlt 应由后端根据图像类型提供默认策略，不是编译器能猜出来的。
