iPhone VoiceOver读取带®字符的HTML锚点异常问题咨询

不少开发者都遇到过这个问题，这属于VoiceOver处理<sup>标签包裹特殊字符时的已知兼容性问题。

问题原因 #

VoiceOver对<sup>的解析逻辑和其他屏幕阅读器不一样：当®放在<sup>里且紧跟在文本后面时，它会把<sup>里的内容和后续文本拆成不同的可聚焦区块，导致读完“Google”就中断，还会忽略®对应的“Registered”朗读。

修复方案 #

给你几个实用的解决办法：

• 直接去掉<sup>标签：如果不需要上标样式，直接写 Google® Product，VoiceOver就能正常读出“Google Registered Product”。
• 保留样式加ARIA属性：要是必须保留上标效果，给<sup>加aria-label明确朗读内容，同时用role="text"让VoiceOver把它当成连续文本处理：

  <a href="www.google.com">Google<sup role="text" aria-label="Registered">®</sup> Product</a>
  

• 用CSS模拟上标：放弃<sup>标签，用CSS实现上标样式，避免VoiceOver的标签识别问题：

  <a href="www.google.com">Google<span style="vertical-align: super; font-size: smaller;">®</span> Product</a>
  

补充说明 #

这个问题在iOS不同版本里表现可能有差别，部分新版本iOS已经优化了这类标签处理，但为了兼容更多设备，优先用上面的方案更稳妥。

内容的提问来源于stack exchange，提问作者Villie