HTML lang属性提升多语言页面可访问性-html教程-PHP中文网

不行，只在上写lang="zh"无法满足多语言可访问性；必须用lang="zh-cn"等符合bcp 47标准的带地区码格式，否则屏幕阅读器分词错误、声调错乱、标点停顿异常，且局部外文内容须显式标注lang，不可依赖继承。

html lang属性提升多语言页面可访问性

只在上写 lang="zh" 就算完成多语言可访问性？不行。这会导致屏幕阅读器把中文读成日语腔、Chrome 翻译按钮不出现、中英混排时英文被逐字拼音化朗读。

为什么 `lang="zh"` 是无效值，必须用 `lang="zh-CN"`

BCP 47 标准不承认 zh 这种孤立语言码，浏览器和 NVDA/VoiceOver 等辅助技术会直接忽略或降级处理。实际后果包括：

分词错误：把“上海浦东机场”切分为“上-海-浦-东-机-场”，而非语义单元
声调错乱：“行”该读 xíng 却按英文规则读成 háng
标点停顿异常：中文顿号、书名号被当成英文标点处理
字体 fallback 失效：lang="zh" 不触发简体中文字体链（如 "PingFang SC", "Microsoft YaHei"）

正确写法必须带地区码：lang="zh-CN"（大陆简体）、lang="zh-TW"（台湾繁体）、lang="zh-HK"（香港繁体）。服务端初始 HTML 就得输出对，JS 动态改没用——SSR 阶段已失效。

局部多语言内容必须显式加 `lang`，不能靠继承

一段英文引文、一个日文术语、<pre class="brush:php;toolbar:false;"></pre> 里的代码注释，只要出现在 DOM 中且未被 aria-hidden="true" 掩盖，就会被读屏软件捕获并按当前上下文语言朗读。常见错误是只设根 lang，结果整页都被当成中文处理。

正确：<p lang="en">The Art of Computer Programming</p>
错误：<p>The Art of Computer Programming</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（没声明语言）
嵌套需闭合：外层 lang="zh-CN"，内层 <blockquote lang="ja-JP">...</blockquote> 必须完整包裹，不能只开不关
避免三层以上嵌套：连续 lang="zh-CN" → lang="en-US" → lang="ko-KR" 容易让部分 AT 缓存混乱

表单 placeholder、SVG <title></title>、Canvas fallback 文本、JS 动态插入的弹窗文案——这些地方常被当成“视觉辅助”，但只要它们在 DOM 中可见，就必须同步设置对应 lang 或用 aria-label 显式覆盖。

语言切换时，`document.documentElement.lang` 必须同步更新

SPA 切换语言后只改 document.body.lang 或只刷新文案，等于没做可访问性适配。屏幕阅读器初始化语音引擎完全依赖 document.documentElement.lang，不更新就导致：

嘴在说日语，耳里听中文：SpeechSynthesisUtterance.lang 设了 "ja-JP"，但页面根 lang 还是 "zh-CN"，AT 仍按中文语义解析结构
Chrome 翻译按钮失灵：按钮是否激活完全由根 lang 决定，设成 en 却显示中文，翻译功能直接灰掉
动态插入的 DOM 节点无语言上下文：新插入的 <button data-i18n="submit"></button> 元素，若父容器 lang 没同步，会被读成错误音调

更新逻辑必须三步走：1）fetch 新语言包成功；2）document.documentElement.lang = 'zh-Hans'；3）立即调用翻译函数处理新节点。漏掉任何一步，可访问性就断在用户耳边。

最麻烦的不是写错，而是写了但没真机测——iOS VoiceOver、Android TalkBack、Windows NVDA 对 lang 的解析策略各不相同，桌面模拟器根本跑不出真实问题。