document.documentelement.lang 动态赋值无效，因浏览器和辅助技术在html解析初期已锁定语言上下文；必须在首屏html中声明符合bcp 47标准的lang值，并对所有含文本的语义化元素显式设置lang属性。
动态页面里改 lang 属性，光靠 JS 赋值基本没用——屏幕阅读器不重读、Chrome 翻译按钮不激活、SEO 也收不到信号。
为什么 document.documentElement.lang = 'zh-CN' 常常白忙活
辅助技术（如 NVDA、VoiceOver）在 HTML 解析初期就读取 ，DOM 渲染完成后才执行 JS，此时语音引擎已加载完毕，再改属性不会触发重载。浏览器翻译按钮、:lang() CSS 选择器、搜索引擎抓取也都依赖初始 HTML 中的值，JS 后期覆盖等于对空气说话。
- 常见错误：SPA 切换语言时只执行
document.documentElement.lang = 'ja-JP'，但用户刷新页面后又回到旧语言 - 更隐蔽的问题：第三方脚本插入的文本节点（如评论框、广告位）没带
lang，会被默认按根语言处理，导致日文引文被中文 TTS 强行朗读 - 真实限制：iOS VoiceOver 甚至不响应
lang的 JS 变更，必须整页 reload 才能切语音库
SSR/SSG 场景下必须服务端注入真实值
Next.js、Nuxt、Remix 等框架支持服务端生成不同语言的 HTML 入口，这是最稳妥的路径。关键不是“能不能设”，而是“在哪个环节设”——必须在首屏 HTML 字节流中就写对。
- Next.js App Router：
写在app/layout.tsx，locale来自路由参数或中间件解析的Accept-Language - Nuxt：用
useLocaleHead({ lang: 'zh-CN' })，确保输出到标签而非内其他位置 - PHP/Node 模板：直接插值，但必须做 XSS 过滤，例如
- 静态站（Hugo/Jekyll）：每个语言版本生成独立 HTML 文件，
lang硬编码进模板，不走 JS 切换
局部多语言内容必须逐元素显式声明
只定义主语言，不影响内部英文术语、法语引文、<pre class="brush:php;toolbar:false;" lang="bash"></pre> 的识别。这些节点若不单独加 lang，就会被当成中文文本处理——比如 <p>API</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 被 VoiceOver 读成“阿皮”，而不是 “A-P-I”。
- 该加的：引用块
<blockquote lang="fr">Merci</blockquote>、代码示例<pre class="brush:php;toolbar:false;" lang="en">npm install</pre>、界面术语<code lang="en">useState - 不该加的：
<script></script>和<style></style>标签内部、纯装饰性<div>、空 <code><span></span> - 注意继承陷阱：一个
<div lang="en"> 下的 <code><p></p>会继承lang="en"，但如果里面嵌了中文说明，就得再写<span lang="zh-CN">（简体）</span>SPA 语言切换时的现实妥协方案
纯前端 SPA 若无法 SSR，只能接受体验折损。强制整页刷新（
window.location.href = '/zh-CN/'）是最兼容的做法；若必须无刷新，则需组合多个补救动作，且仍有边界失效风险。- 必须同步操作：
document.documentElement.lang+document.title = document.title（触发部分屏幕阅读器重读）+ 遍历所有含文本的元素，手动更新其lang属性 - 不能省略的清理：
document.querySelectorAll('[lang]')获取所有已设lang的节点，逐一比对并重置，否则旧lang="en"的<p></p>仍按英文断词 - 第三方组件坑点：React 组件内用
useEffect改lang，但首次挂载时 DOM 已渲染，得配合forceUpdate或 key 重置整个子树 - 真正难的不是设对一个值，而是让所有动态插入的 DOM 片段（弹窗、分页表格、懒加载模块）都带着准确的
lang上线，这需要 i18n 工具链深度集成
最易被忽略的一点：语言切换后，
hreflang标签和lang属性没有自动关联，两者必须独立维护且保持一致；否则 Google Search Console 会报“语言声明冲突”，影响多语言站点的索引分配。 - 必须同步操作：
