必须将 lang 属性设在 <html> 标签上且严格符合 BCP 47（如 zh-CN），因 NVDA、VoiceOver 等屏幕阅读器仅在解析 <html> 时初始化全局语音引擎，body 或 div 中的 lang 仅作局部覆盖或无效，大小写、下划线、缺地区码等错误均导致静默 fallback 至英文引擎。
必须写在 <html> 标签上，且值严格符合 BCP 47 标准（如 zh-CN），否则屏幕阅读器根本不会按中文读——它不是“读得不准”，而是静默 fallback 到英文引擎，把“登录”逐字拼成 “dēng lù” 或直接读成 “Deng Lu”。
为什么只改 <body lang="zh-CN"> 没用
NVDA、VoiceOver、JAWS 这些主流屏幕阅读器只在初始解析 HTML 时读取 <html> 元素的 lang 属性，用它初始化整页语音引擎。其他位置的声明全被忽略：
-
<body lang="zh-CN">：被当作局部语言覆盖，不影响全局语音选择 -
<meta http-equiv="Content-Language">：HTML5 已废弃，现代 AT 完全不识别 -
<div lang="zh-CN">：只对内部文本生效，且前提是<html>的lang已正确设置
lang 值写错等于没写
浏览器和语音引擎只认小写字母 + 连字符 + 地区码（可选）的组合，错一个字符就静默忽略：
- ✅ 正确：
zh-CN、en-GB、ja-JP、zh-Hans、zh-Hant - ❌ 无效：
zh_cn（下划线）、ZH-CN（大写）、zh（缺地区码）、Chinese（非标准字符串） - 后端返回
zh_ch这类脏数据？前端必须清洗成zh-CN再赋给document.documentElement.lang
表格里外语词读不准，是因为没在 <td> 上单独写 lang
浏览器和屏幕阅读器不继承 <table> 或 <tr> 的语言设置。哪怕你给整张表加了 <table lang="en">，里面的法语词仍会被中文引擎硬读：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<td lang="fr">bonjour</td>、<th lang="en-US">API</th> - ❌ 无效写法：
<td><div lang="fr">bonjour</div></td>——<div>没有语言语义，读屏软件只认<td>自身的lang - 中英混排术语表，每个单元格都要独立标注：
<td lang="zh">辅助技术</td><td lang="en">Assistive Technology</td>
动态切换语言时，只改 document.body.lang 是错的
SPA 页面语言切换，常见错误是只改 document.body.lang 或只更新 UI 文本，导致语音合成与屏幕阅读器状态错位：
- 必须操作
document.documentElement.lang，这是唯一影响全局语音引擎的入口 - 已创建的
SpeechSynthesisUtterance实例不会自动继承新lang，需重新new并显式设utterance.lang = "zh-CN" - 若用
<mark lang="en-US">AP</mark>标出英文术语，<mark>本身不触发语音强调，但配合正确lang能让屏幕阅读器在读到它时自动切引擎
最常被忽略的点是：语音是否自然，80% 取决于 lang 是否准确、是否嵌套得当，而不是用了多高级的 TTS 库。它不报错、不警告，只是悄悄读错——直到用户反馈“听不懂”。
