lang属性必须为ietf标准格式如zh-cn,因zh单独存在不符合bcp 47规范,会导致屏幕阅读器分词错误、声调错乱、标点停顿异常;多语言混排需在对应元素显式标注lang,不可仅依赖根标签继承。

lang 属性写错或不写,屏幕阅读器大概率会把中文读成日文、英文甚至乱码——这不是“听起来别扭”,而是用户根本听不懂。
为什么 lang="zh" 是错的,必须写 lang="zh-CN"
浏览器和辅助技术(如 NVDA、VoiceOver)依赖 IETF 语言标签标准,zh 单独存在不是合法值,AT 兼容性极差。实际效果是:分词错误、声调错乱、标点停顿异常。
-
lang="zh-CN"→ 简体中文(推荐用于大陆用户) -
lang="zh-TW"→ 繁体中文(台湾地区) -
lang="zh-HK"→ 繁体中文(香港地区) - 绝对不要用
lang="ch"、lang="cn"、lang="zh"
React/Vue 中动态渲染时,lang 值不能靠 JS 拼接后塞进 DOM;必须确保服务端初始 HTML 就带对,否则 SSR 阶段已失效。
多语言混排时,局部 lang 怎么嵌套才安全
一段英文引文、一个外文人名、一段代码注释里的日文——这些都得用 lang 显式标注,否则整页被统一识别为中文,局部内容会被强行“中文化朗读”。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- 正确:
<p lang="en">The quick brown fox...</p> - 错误:
<p><span>The quick brown fox...</span></p>(没声明语言) - 嵌套需闭合:外层
lang="zh-CN",内层lang="ja"的<blockquote></blockquote>必须完整包裹,不能只开不关 - 避免过度嵌套:连续三层
lang切换会让部分 AT 缓存混乱,优先合并同类语种块
hreflang 和 lang 完全是两回事,别混用
hreflang 是给搜索引擎和浏览器导航用的(比如 @#@#@#@#@#@#@#@#@#@0),它不影响当前页面的语音朗读逻辑。lang 才决定屏幕阅读器怎么读这一段文字。
- 漏写
lang→ 当前元素语音输出不可控 - 只写
hreflang不写lang→ 多语言链接跳转后,新页面仍可能读错 - 双语页面首页同时有中英文区块?每个区块开头必须带对应
lang,不能只在上写一个
容易被忽略的边界场景
表单 placeholder、SVG title、<canvas></canvas> fallback 文本、JS 动态插入的弹窗文案——这些地方常被当成“视觉辅助”,但只要它们出现在 DOM 中,且未被 aria-hidden="true" 或 display: none 掩盖,就会被读屏软件捕获并按当前上下文语言朗读。
- placeholder 写中文但父容器
lang="en"?会被读成英文发音 - SVG 中
<title>编辑</title>没加lang="zh-CN"?照样读错 - 用
innerText动态写入提示语时,记得同步设置父元素lang或用aria-label覆盖
最麻烦的不是写错,而是写了但没测——不同 AT 对嵌套 lang 的解析深度不一致,NVDA 和 VoiceOver 在混合脚本(如中+阿拉伯数字+拉丁字母)段落里表现差异明显。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










