Chrome翻译按钮不出现是因为<html>标签的lang属性未正确设置或格式错误，如大小写、空格、弃用写法等；屏幕阅读器误读源于lang粒度缺失，需对局部内容显式标注；JS动态修改lang无效，须服务端输出或强制重读；lang与charset必须匹配，否则中文乱码。
Chrome翻译按钮不出现，一定是lang没设对
浏览器只在解析 <html> 标签时读取 lang 属性，其他位置写的全无效。常见错误包括：<body lang="zh-CN">、<meta http-equiv="Content-Language" content="zh-CN">（HTML5 已弃用）、甚至空值 <html lang=""> —— 这些都会让 Chrome 认为页面“未声明语言”，翻译按钮直接消失。
更隐蔽的是大小写和分隔符问题：zh_cn、ZH-CN、zh-CN （末尾带空格）全被静默忽略。Lighthouse 会报 invalid language subtag，但开发时往往没人看这行提示。
屏幕阅读器读错“北京”“API”，根源在lang粒度缺失
根节点 lang="zh-CN" 只管默认行为，遇到英文术语、代码、引文，屏幕阅读器仍用中文规则硬读——“API”变成“阿皮”，“React”读成“瑞克特”，日文假名被中文字体渲染导致显示异常。
必须显式标注语义明确的局部内容：
立即学习“前端免费学习笔记（深入）”；
-
<blockquote lang="fr">Je suis français.</blockquote>—— 引文需完整语义上下文 -
<code lang="en">useState</code>—— 比<span lang="en">更准确，部分读屏对<code>有停顿优化 -
<p lang="en">The response is a JSON object.</p>—— 整段英文说明不能靠继承
别给每个单词都加 lang，DOM 体积膨胀会拖慢可访问性树构建。
SPA切换语言后语音朗读没变化，JS改lang基本白忙
辅助技术在 HTML 初始解析阶段就读取 document.documentElement.lang，JS 后期修改对已激活的朗读会话几乎无效。React/Vue 应用里执行 document.documentElement.lang = "en-US"，只影响后续插入的 DOM 节点，已挂载组件、已绑定的 :lang(en) CSS 规则、甚至当前正在朗读的文本都不会重算。
真正有效的做法只有两种：
- 服务端渲染时就输出正确值：Next.js 在
app/layout.tsx里用<html lang={locale}>，PHP 模板用<html lang="= htmlspecialchars($lang, ENT_QUOTES) ?>"> - 若必须前端动态切，除赋值外还得触发重读：执行
document.title = document.title（空赋值）强制屏幕阅读器刷新根节点，但兼容性不稳定
lang和charset不匹配，中文显示乱码却查不出原因
很多项目只盯着 lang，却忘了它和 charset 是强耦合的。即使 lang="zh-CN" 写得完全正确，只要文件实际存为 GBK、或响应头返回 Content-Type: text/html; charset=gbk，浏览器照样 fallback 到错误编码，结果就是 北京 显示成 å京。
排查必须三路并进：
- 用
file -i yourfile.html或 VS Code “Save with Encoding” 确认磁盘文件真实编码（别信编辑器右下角状态栏） - 在 Network 面板检查响应头中的
Content-Type值 - 运行时检查
document.charset是否等于"UTF-8"
CI 流程里应加断言：若 document.charset !== "UTF-8" 或响应头缺失 charset=utf-8，直接 fail。一个错，另一个再准也没用。
