如何用 lang 属性提升网页可访问性和多语言 SEO

把 <html lang="zh-Hans"> 这一行写对，能同时解决两件事：让屏幕阅读器调用正确的中文语音引擎朗读页面，让搜索引擎和浏览器翻译判断出页面的真实语言。它是 WCAG 2.1 达标项 3.1.1（Language of Page，A 级）的硬性要求，也是多语言站点最常被漏掉的一处。

lang 属性该写什么值？按 BCP 47 格式写

结论：lang 的值必须是合法的 BCP 47 语言标签（RFC 5646），推荐结构是「语言-文字-地区」，例如 zh-Hans、zh-Hant、en-US、pt-BR。

书写惯例是：语言子标签小写，文字子标签首字母大写（ISO 15924 规范，Hans = 简体中文，Hant = 繁体中文），地区子标签全大写（ISO 3166-1，如 CN、US、BR）。大小写本身不敏感，但统一写法便于工具校验和团队 review。

简体中文推荐写 zh-Hans 而不是 zh-CN。两者的区别在于：zh-CN 表达的是「在中国使用的中文」，zh-Hans 表达的是「简体中文」——新加坡、马来西亚的简体中文用户同样属于后者。同理，英文站只写 lang="en" 即可，只有在需要区分美式与英式拼写时才写 en-US / en-GB。

必须用非标准值的情况：不要写 chinese、zh_CN（下划线）、cn，这类值会直接触发 axe 的 html-lang-valid 规则报错。

三个必查位置：

1. 根元素：<html lang="zh-Hans">
2. 局部文本：<span lang="en">、<blockquote lang="ja">
3. 框架配置：Next.js App Router 在 app/layout.tsx 中写 <html lang="zh-Hans">，缺失会在控制台输出 warning；Nuxt 在 nuxt.config.ts 里设 app.head.htmlAttrs.lang；纯 Vue/React 单页应用要改 public/index.html，因为路由切换不会动态更新这个属性。

lang 和 hreflang 有什么区别？

结论：lang 描述「这段内容是什么语言」，hreflang 描述「另一个语言版本的页面在哪里」，两者各管一件事，不能互相替代。

hreflang 写在 <head> 里，用 link 元素声明语言版本之间的关系：

<link rel="alternate" hreflang="zh-Hans" href="https://example.com/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

Google 给用户返回哪个语言版本，依据的是 hreflang，而不是 <html lang>。但如果 <html lang> 声明为 en、页面正文却是中文，就属于自相矛盾——Google 的语言判定和 Chrome 的自动翻译都会出错。做法上让两者一致：hreflang 的值与对应页面 <html lang> 的值保持相同，x-default 指向语言选择页或默认版本。

页面里混进英文术语，要不要单独标？

结论：要。WCAG 2.1 的 3.1.2（Language of Parts，AA 级）要求标注与页面主语言不同的段落和短语。

<p>我们用 <span lang="en">tree shaking</span> 来减小打包体积。</p>
<blockquote lang="en">Premature optimization is the root of all evil.</blockquote>

NVDA、JAWS、VoiceOver 会读取 lang 并切换语音库，把英文片段交给英语合成器朗读。不标注时，中文语音引擎会把 "tree shaking" 读成毫无意义的音节组合。实践上：成句引用必须标，单个已经进入中文语境的外来词（如 API、HTML）可以不标。

为什么写了 lang 还被无障碍工具报错？

结论：报错集中在三类——值为空、值不合法、只写了 xml:lang。

lang="" 在 HTML5 中表示「语言未知」，无障碍扫描会判定失败；XHTML 文档需要 xml:lang，而 HTML5 文档直接用 lang 即可，不必两套都写。

验证方法有三种：Chrome DevTools 的 Lighthouse 面板跑 Accessibility 审计；安装 axe DevTools 扩展查看 html-has-lang、html-lang-valid 两条规则；或者把线上 URL 提交到 W3C Nu HTML Checker 做语法校验。建议把这三步接进 CI，避免改模板时把 lang 弄丢。

一句话收束：根元素写对 zh-Hans，外文片段单独标 lang，多语言版本用 hreflang 指向，三件事做完，屏幕阅读器、搜索引擎和自动翻译才会对你的页面做出正确判断。