lang属性必须在模板编译前写死并校验白名单，<main>必须是<body>的直接子元素，禁止嵌套于任何wrapper内，否则破坏语义链、导致屏幕阅读器忽略；标题层级须动态控制，避免跳级。
lang 属性必须在模板编译前就写死，不能靠运行时 JS 注入；<main> 必须是 <body> 的直接子元素，任何模板层的嵌套 wrapper 都会破坏语义链。
模板引擎里怎么安全注入 lang 值
很多模板（如 EJS、Nunjucks、Handlebars）允许用变量插值写 lang="{{ locale }}"，但这是危险操作——如果 locale 是用户可控输入（比如 URL 参数或 cookie），可能注入 lang="zh-CN onerror=alert(1)"，导致 XSS 或 AT 解析失败。
- 只接受白名单值：
zh-CN、zh-TW、en-US等 IANA 注册码，拒绝zh、cn、空字符串 - 服务端做校验，不是前端 JS 过滤；Node.js 中可用
new Intl.Locale(locale).toString()验证合法性 - SSR 场景下，
<html lang="...">必须顶格输出，前面不能有 BOM、空格或注释，否则 NVDA 会跳过整个文档
<main> 在模板分块结构中如何不被“包坏”
常见错误：把 <main> 套进 <div class="container"> 或 <Layout> 组件里。即使模板语法看起来干净，编译后 DOM 就变成 <body><div><main>...</main></div></body>，屏幕阅读器直接无视 <main>。
- 模板入口文件（如
index.html或app.njk）中，<main>必须紧贴<body>开始标签之后，中间无其他标签 - 布局复用用
<include>或<partial>，而不是包裹式组件；内容区用{{ content }}直接插入到<main>内部 - 若必须加外层容器（如全站统一 padding），用
<div role="region" aria-label="主内容">替代，不破坏<main>的直系关系
标题层级断裂在模板循环中怎么防
模板里常这样写：{% for post in posts %}<h2>{{ post.title }}</h2>...{% endfor %}。但如果页面已有 <h1>，这些 <h2> 没问题；可一旦模板被复用到二级页（<h1> 缺失），所有 <h2> 就变成“从 H2 开始”，跳过 H1，违反 WCAG 1.3.1。
立即学习“前端免费学习笔记（深入）”；
- 强制模板传入
headingLevel变量，动态生成<h{{ headingLevel }}>；根页传 1，子页传 2 - 禁用硬编码
<h3>，除非明确知道父级一定是<h2> - 用 axe-core 在 CI 中扫描
heading-order规则，比人工 review 更可靠
真正难的不是写对一行 lang="zh-CN"，而是确保模板继承链里每层都不悄悄加 wrapper、不默认降级标题、不把 locale 当字符串拼接——可访问性在模板层就断掉，后面所有 JS 补救都是徒劳。
