HTML多语言混合排版时的页面可访问性语言标记-html教程-PHP中文网

lang属性必须用bcp 47标准格式，如zh-cn而非zh；多语言混排需显式嵌套lang标签；表单placeholder、svg title等易漏处也须标注；hreflang与lang功能不同，不可替代。

html多语言混合排版时的页面可访问性语言标记

lang 属性写错或不写，屏幕阅读器大概率会把中文读成日文、英文甚至乱码——这不是“听起来别扭”，而是用户根本听不懂。

为什么 `lang="zh"` 是错的，必须用 `lang="zh-CN"`

浏览器和辅助技术（如 NVDA、VoiceOver）依赖 IETF BCP 47 标准识别语言，zh 单独存在不是合法标签，AT 兼容性极差。实际效果是：分词错误、声调错乱、标点停顿异常。

lang="zh-CN" → 简体中文（推荐用于大陆用户）
lang="zh-TW" → 繁体中文（台湾地区）
lang="zh-HK" → 繁体中文（香港地区）
绝对不要用 lang="ch"、lang="cn"、lang="zh" 或 lang="zh_cn"（下划线非法）

多语言混排时，`lang` 怎么嵌套才安全

一段英文引文、一个外文人名、一段代码注释里的日文——这些都得用 lang 显式标注，否则整页被统一识别为中文，局部内容会被强行“中文化朗读”。

正确：<p lang="en">The quick brown fox</p>
错误：<p>The quick brown fox</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（没声明语言）
嵌套需闭合：外层 lang="zh-CN"，内层 lang="ja-JP" 的 <blockquote></blockquote> 必须完整包裹，不能只开不关
避免过度嵌套：连续三层 lang 切换会让部分 AT 缓存混乱，优先合并同类语种块

哪些地方容易漏写 `lang`，但其实必须加

表单 placeholder、SVG <title></title>、<canvas></canvas> fallback 文本、JS 动态插入的弹窗文案——这些地方常被当成“视觉辅助”，但只要它们出现在 DOM 中，且未被 aria-hidden="true" 或 display: none 掩盖，就会被读屏软件捕获并按当前上下文语言朗读。