lang属性是影响屏幕阅读器发音准确性的关键标记,必须在html根元素设置主语言(如zh-CN、en-US),多语言混排时需对局部内容显式标注,避免使用非法值或空值。

lang 属性告诉屏幕阅读器当前内容的语言,从而调用对应语音引擎,准确朗读文字(包括标点、缩写、数字读法等)。 它不是可有可无的装饰,而是影响发音准确性的关键标记。
必须在根元素(html)上设置主语言
这是最基础也最重要的一步。不设或设错会导致整页朗读失真:
- 中文页面:
- 英文页面:
- 繁体中文(如台湾):
若未声明,屏幕阅读器会按系统默认语言朗读——比如用户系统是日语,而网页是中文,结果就是用日语音读汉字,完全不可懂。
多语言混排时,对局部内容显式标注 lang
中英文夹杂、引用外语术语、代码片段、人名地名等场景,需用 lang 精确“切换语境”:
立即学习“前端免费学习笔记(深入)”;
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
这个功能叫 dark mode(深色模式)。
La vie est belle.
print("Hello")
注意:lang 值要尽量具体(如 en-US 而非仅 en),因为美式/英式英语发音差异明显(如 “schedule”、“tomato”);浏览器和主流读屏软件(NVDA、VoiceOver、JAWS)都支持子标签识别。
避免常见错误写法
这些写法看似合理,实则无效或有害:
- ❌ —— “chinese” 不是合法 BCP 47 语言标签,应为 zh 或 zh-CN
- ❌
—— 空值会被忽略,等于没设
- ❌ 在 CSS 里用 :lang() 代替 HTML 的 lang 属性 —— 伪类只用于样式,不影响读屏行为
- ❌ 把 lang 当作 SEO 关键词堆砌(如多个 lang 套嵌无意义)—— 既无益于可访问性,也可能干扰解析
验证是否生效的小技巧
不用等用户反馈,自己就能快速检查:
- 用 NVDA + Firefox 或 VoiceOver + Safari 打开页面,光标聚焦到某段外文上,听是否切换为对应语言发音
- 在浏览器开发者工具中审查元素,确认 lang 属性存在且值正确
- 使用 WAVE 或 axe 浏览器插件,它会直接提示缺失或错误的 lang 声明
不复杂但容易忽略,加对了 lang,屏幕阅读器就真正“听懂”你的网页了。
- ❌


















