ruby标签的<rt>内容在VoiceOver和TalkBack中默认不朗读，需系统设置开启；必须配<rp>实现降级兼容，且<rb>与<rt>须严格一一对应、顺序不可颠倒。
ruby 标签在 VoiceOver 和 TalkBack 中是否会被朗读
取决于浏览器版本和系统设置，不是默认开启。iOS 17+ 的 VoiceOver 默认跳过 rt，需手动打开「语音反馈 > 注音朗读」；Android TalkBack 在 Chrome 120+ 上可识别 rt 内容，但若页面同时用了 aria-hidden="true" 或 CSS 隐藏了 rt，就会完全静音。
关键点：rt 不是自动被朗读的“语音标签”，它只是语义上声明“这是注音”，最终是否播报由辅助技术决定。测试时务必用真机+最新系统，不能只看桌面 NVDA 表现。
- 必须确保
rt是ruby的直接子元素，中间不能有span、换行或空格，否则 VoiceOver 可能忽略整组 - 避免给
ruby加display: inline-flex或position: relative——这类样式会切断语义链，让屏幕阅读器丢失上下文 - 如果项目要强保无障碍，建议额外加
aria-label到外层容器（如<span aria-label="hàn zì"><ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby></span>），但注意不要重复播报
rp 标签不是装饰，而是无障碍降级的关键
rp 的作用不是美化，是在不支持 ruby 的环境（比如 Outlook 桌面客户端、旧版 Edge、部分邮件阅读器）里提供括号包裹的 fallback 文本。没有它，降级后就是「汉hàn字zì」连在一起，既不可读，也不可被语音引擎切分。
标准写法必须成对出现，且内容只能是纯括号字符：
立即学习“前端免费学习笔记（深入）”；
<ruby>汉<rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>
现代浏览器会隐藏 rp，只渲染 rt；老环境则显示「汉(hàn)」。漏掉任意一个 rp，或往里面塞文字（如 <rp>(拼音)</rp>），都会导致降级失败。
多字连续 ruby 在 iOS Safari 上的间距问题会影响语音节奏
连续多个 ruby 并列（如 <ruby>一<rt>yī</rt></ruby><ruby>衣<rt>yī</rt></ruby><ruby>带<rt>dài</rt></ruby>）在 iOS Safari 中可能出现微小字间距异常，视觉上不明显，但 VoiceOver 会把相邻两个 ruby 之间的间隙识别为“停顿”，造成朗读断续、节奏错乱。
缓解方法很简单：在外层容器加 font-size: 0，再给每个 ruby 单独设字号：
<div style="font-size: 0"> <ruby style="font-size: 16px">一<rt>yī</rt></ruby> <ruby style="font-size: 16px">衣<rt>yī</rt></ruby> </div>
别用 letter-spacing 或负 margin 调整——它们不改变语义间距，只干扰视觉，对语音无改善。
ruby 不适合替代 aria-label 做核心可访问性方案
有人试图用 <ruby>汉<rt>hàn</rt></ruby> 替代 aria-label="hàn"，这是误区。ruby 是为「已有可视文本的注音补充」设计的，不是为「无文本控件提供替代文本」。按钮、图标、表单字段仍必须用 aria-label 或 aria-labelledby。
更现实的问题是：如果你的用户群体含大量视障人士，且他们习惯用老设备或特定邮件客户端，ruby 的支持率远低于基础 ARIA 属性。真正要保底，得双写：
- 视觉层用
ruby+rt提供注音 - 语音层用
aria-label或data-pinyin属性提供机器可读拼音（供 JS 动态注入或 SSR 渲染） - 降级层用
rp确保纯文本环境可读
这三个层次缺一不可，而最容易被跳过的，恰恰是 rp 和 aria-label 的组合。
