lang属性必须加在根标签上确立主语言，且所有含自然语言文本的元素（如、、）需显式标注对应lang值以确保屏幕阅读器准确识别。

lang属性该加在哪个HTML元素上才有效

必须加在实际包含文本内容的元素上，不是只加在根标签就万事大吉。屏幕阅读器（如NVDA、VoiceOver）按DOM顺序朗读时，会就近查找最近的lang属性——它只继承到子元素，但会被更内层的lang覆盖。

常见错误是只写，结果一段嵌入的<p>Bonjour</p>仍按中文发音。正确做法是给那句法语单独加属性：

<p lang="fr">Bonjour, comment allez-vous ?</p>

• 段落、列表项、表格单元格、按钮文字等含自然语言文本的容器都应独立标注
• <span></span>或<em></em>这类行内元素也可以加lang，适合短语级切换，比如<span lang="ja">こんにちは</span>
• 避免在<div>或<code><section></section>这种纯布局容器上盲目加lang，除非它内部所有文本确实统一为该语言

  中英文混排时lang值怎么选：zh-CN还是zh-Hans

  优先用zh-Hans（简体中文）或zh-Hant（繁体中文），而不是zh-CN或zh-TW。原因很实际：屏幕阅读器对zh-Hans的支持更稳定，能明确触发简体字发音规则；而zh-CN仅表示“中国大陆”，不承诺字形或语音方案，某些读屏软件可能回退到默认中文引擎，导致粤语或旧式发音。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 英文段落一律用en或更细粒度的en-US/en-GB，尤其影响“schedule”“tomato”等词的重音位置
  • 日语推荐ja，不需要加-JP；韩语同理用ko
  • 不要用lang="auto"——这个值不存在，浏览器和读屏器都会忽略

  遇到CSS或JS干扰发音怎么办

  即使lang写对了，也可能被视觉隐藏、CSS display: none、或JS动态插入的内容破坏可访问性链路。屏幕阅读器不会朗读display: none或visibility: hidden的内容，哪怕它有lang属性。

  • 用aria-hidden="true"替代display: none隐藏装饰性文字，否则读屏器可能跳过本该朗读的多语言文本
  • JS动态生成的文本（比如翻译按钮点击后替换的段落），必须同步设置lang属性，不能依赖初始HTML
  • 避免用font-family强制显示某语言字体却没配lang——字体只是视觉，发音逻辑全看lang

  验证lang是否生效的最快方法

  别只靠肉眼检查HTML源码。打开Chrome + NVDA（Windows）或Safari + VoiceOver（macOS），把光标停在目标段落上，按读屏器快捷键（如NVDA+Shift+T）查看当前语言上下文。你看到的应该是类似“Language: French (fr)”这样的提示。

  • 用Lighthouse跑一次“Accessibility”审计，它会直接报出document-lang-valid和html-has-lang两项，但注意：它只检查标签，不查内层段落
  • 禁用CSS后手动浏览页面，确认所有多语言文本块依然清晰可辨且有对应lang——这是判断是否“真实生效”的土办法
  • 特别留心引号、破折号、省略号等标点：中英文混排时，如果lang没切准，读屏器可能把中文引号“”当成英文引号""处理，导致停顿错乱

  最常被忽略的是代码块、表格标题、表单占位符里的语言切换——它们同样需要lang，否则读屏器会沿用父级语言，把placeholder="Search..."用中文音调念出来。