是，主流屏幕阅读器会朗读内容，但需结构合法且未隐藏；多字共用一个导致注音与汉字无法对应，破坏语义粒度；仅用于旧环境降级显示，不影响现代无障碍体验；响应式下需注意字号与渲染一致性。
ruby 标签是否被屏幕阅读器识别
是，主流屏幕阅读器（VoiceOver、NVDA、JAWS）会朗读 <rt></rt> 内容，但前提是结构合法且未被隐藏。它不是“自动触发语音”，而是作为语义附属文本被纳入 ARIA 树的注解节点中。如果写成 <ruby>汉</ruby><rt>hàn</rt>（<rt></rt> 脱离 <ruby></ruby>），VoiceOver 就完全跳过；如果加了 aria-hidden="true" 或 display: none 到 <rt></rt>，也会被忽略。
为什么多字共用一个 rt 会破坏无障碍体验
当把多个汉字塞进一个 <ruby></ruby> 并只配一个 <rt></rt>，比如 <ruby>汉字<rt>hàn zì</rt></ruby>，屏幕阅读器无法区分“汉”和“字”的对应关系。它可能朗读为“汉字，hàn zì”，也可能合并成单个词播报，丢失逐字注音的语义粒度。这对学习者、视障用户或需要精确发音反馈的场景是致命缺陷。
- 正确做法是每个字独立包裹：
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby> - 若基字用了
<rb></rb>，必须确保<rb></rb>和<rt></rt>同级且一一对应，否则 VoiceOver 可能漏读<rb></rb>内容 - 避免在
<ruby></ruby>外层加role="text"或其他冗余 ARIA —— 它本身已是语义明确的内联注解结构
rp 标签对无障碍的实际作用有限
<rp></rp> 不是为屏幕阅读器设计的，它是给不支持 <ruby></ruby> 的旧环境（如 IE11、Outlook 邮件客户端）提供括号 fallback 的兼容机制。VoiceOver 和 NVDA 在现代浏览器中根本不会朗读 <rp></rp>，也不会把它当作语义内容处理。它的存在与否不影响无障碍核心体验，只影响降级后的可读性。
- 写
<rp>(</rp><rt>hàn</rt><rp>)</rp>是为了确保老环境显示“汉(hàn)”而非“汉hàn” - 若项目已放弃 IE 和老旧邮件客户端支持，可省略
<rp></rp>，不损害无障碍能力 - 别指望
<rp></rp>提升 TTS 准确性——声调、轻声、变调仍需人工校对并填入<rt></rt>
ruby 在响应式或缩放场景下的可访问性风险
当用户放大页面至 200% 或使用系统级高对比度模式时，<rt></rt> 默认的小字号可能变得极难辨识，而某些 CSS 重置（如 font-size: 0.5em）会让它彻底消失在视觉中。更隐蔽的问题是：部分安卓 WebView 对 <ruby></ruby> 的行高计算异常，导致 <rt></rt> 被裁剪或压入基字下方，屏幕阅读器虽能朗读，但视觉与听觉严重脱节。
- 推荐用相对单位：
rt { font-size: 0.65em; }而非固定像素值 - 务必测试 zoom=200% 下的渲染，并检查是否出现文字重叠或截断
- 不要依赖
vertical-align或transform微调位置——它们会干扰屏幕阅读器的流式朗读顺序
<rt></rt> 里填的是错误拼音（如“一衣带水”标成 yī yī dài shuǐ 而非 yī yī dài shuǐ）、漏掉轻声（“我们”写成 wǒ men 而非 wǒ men）、或多音字未按语境选择（“长”在“生长”中标 cháng），屏幕阅读器只会忠实地念错——它不纠错，只传达。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
