必须将 lang 属性设在 标签上且严格符合 bcp 47(如 zh-cn),因 nvda、voiceover 等屏幕阅读器仅在解析 时初始化全局语音引擎,body 或 div 中的 lang 仅作局部覆盖或无效,大小写、下划线、缺地区码等错误均导致静默 fallback 至英文引擎。

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










