ruby标签必须声明lang属性且正确嵌套rb/rt，否则屏幕阅读器无法准确朗读多音字或外语词；中文需lang="zh-Hans"，日语需外层lang="ja"，rt内容须带声调空格、禁用HTML实体。
ruby标签不加lang属性，屏幕阅读器大概率读错多音字
只写<ruby>行<rt>xíng</rt></ruby>，VoiceOver 或 NVDA 很可能仍读成 háng。因为lang决定语音引擎选型，不声明语言，系统就按页面默认语言（比如lang="zh-CN"）加载中文引擎，但该引擎对“银行”的“行”没有上下文判断能力——它只认字形，不认词义。
常见错误现象：
-
iPhone被中文引擎强行读作“爱佛恩”，而非 /ˈaɪfoʊn/ - 日语人名「佐藤」在
lang="zh-CN"页面里读成“zuǒ téng”，而非“さとう” -
<ruby>重<rt>chóng</rt></ruby>庆被连读为“chóng qìng”，但若外层没lang="zh-Hans"，部分 Android TalkBack 会跳过<rt>直接读“重庆”
ruby必须嵌套在正确lang环境下才被屏幕阅读器识别
<ruby>不是装饰标签，它是语义容器；屏幕阅读器是否激活<rt>内容，取决于父级或自身是否声明了可识别的语言环境。iOS VoiceOver 尤其严格：如果<ruby>不在lang="ja"段落里，哪怕里面写了<rt>とうきょう</rt>，也会直接跳过整段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 中文拼音标注必须写
<ruby lang="zh-Hans">汉<rt>hàn</rt></ruby>，不能省略lang="zh-Hans" - 日语振假名要同时声明外层和内部语言：
<p lang="ja"><ruby>東京<rt>とうきょう</rt></ruby></p> - 避免把
<ruby>放在<div lang="en">里却不重设lang——这样<rt>会被当成英文处理，发音完全失真
rb+rt结构缺失会导致屏幕阅读器完全忽略注音
只写<ruby>汉<rt>hàn</rt></ruby>在 Chrome/Firefox 里可能渲染出拼音，但 VoiceOver 和 NVDA 常常静默跳过——因为缺少<rb>，基字语义不完整，辅助技术无法建立“字→音”映射关系。
关键点：
-
<rb>必须显式包裹被注音汉字，不能用纯文本替代（尤其 Safari 16.4+ 和部分安卓 WebView） -
<rt>必须是<ruby>的**直接子元素**，中间不能有空格、换行或其它标签 - 多字必须分层：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，否则屏幕阅读器无法分别播报
带声调的拼音在语音合成中容易被截断或误读
屏幕阅读器对<rt>内容的解析依赖字符完整性。写<rt>hēi sè</rt>能被准确朗读，但<rt>hēisè</rt>（无空格）或<rt>hei se</rt>（无声调）会让合成引擎降级为逐字母拼读，或跳过声调符号导致语义偏差。
易踩的坑：
- 轻声必须写
le，不是liǎo；“一”变调必须写yí wàn，不是yī wàn -
<rt>里禁止 HTML 实体（如我）、额外空格、换行符 - 儿化音统一用
ér，如huā ér，不能缩写为huār——后者会被读成“花儿”两个音节
<rt>都被播报、且与对应汉字严格对齐。 
