屏幕阅读器默认跳过中的拼音,必须显式干预才能朗读;可靠方案是为添加role="annotation"或为设置aria-label,禁用aria-hidden和display: none,多字应逐字结构标注并确保lang属性准确。

屏幕阅读器默认跳过
绝大多数主流屏幕阅读器(VoiceOver、TalkBack、NVDA)在默认配置下会忽略
- Chrome + NVDA:需手动开启“朗读注释”选项,且仅对部分页面生效
- Safari + VoiceOver:完全不触发,除非用
role="annotation"或aria-label显式绑定 - Android TalkBack:对结构识别率低,常把
和基字合并读成“汉hàn”,无停顿、无语义分隔
强制朗读的两种可靠写法:role="annotation" 与 aria-label
想让屏幕阅读器稳定读出拼音,不能依赖浏览器自动推断。必须在
-
role="annotation"是最轻量、语义最准的方案:<rt role="annotation">hàn</rt>,所有现代阅读器都识别该 role 并主动朗读 -
aria-label更适合动态场景(如多音字上下文):<ruby aria-label="汉读作hàn"><rb>汉</rb><rt>hàn</rt></ruby>,但注意不要重复基字本身,否则会读两遍 - 禁用
aria-hidden="true"或display: none—— 这两类操作会直接切断的可访问性通道
多字连读时,逐字结构比整词包裹更易被正确解析
当“重庆”这类双音节词需要标注时,<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> 比 <ruby>重庆<rt>chóng qìng</rt></ruby> 的语音分段更清晰。前者让阅读器能自然停顿,后者容易被读成连续音节“chóngqìng”,丢失字级边界。
- iOS VoiceOver 在逐字结构下会分别播报“重,chóng”、“庆,qìng”,带短暂停顿
- 整词结构下常压缩为“重庆,chóng qìng”,中间无停顿,多音字风险更高(如误读为 zhòng qìng)
- 若服务端无法拆字,至少确保空格存在:
<rt>chóng qìng</rt>(用 代替普通空格),避免被连读
rp标签对屏幕阅读器毫无帮助,反而可能干扰朗读
rp 是为 IE ≤10 等古董浏览器设计的降级括号,它没有语义,也不参与无障碍树构建。在支持的环境中,它既不被朗读,也不影响<rp>(</rp> 可能被误读为“左括号”,造成噪音。
- 不要给
- 如果项目已放弃 IE 支持,直接省略
- 务必避免空
: <rt></rt>会被部分阅读器读作“空白注音”,比不标还糟
role="annotation",若基字本身是<span lang="ja">漢</span>这类跨语言混排,还需同步设置lang="zh-Hans"在前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











