如何让JAWS、VoiceOver、TalkBack等屏幕阅读器可识别朗读自定义图标

现有方案不兼容的核心原因 #

• 你当前使用的sr-only类是旧版写法，部分版本的JAWS、VoiceOver、TalkBack会将1px尺寸的绝对定位离屏元素判定为无效装饰内容，自动跳过朗读
• 独立的sr-only文本没有和心形图标做语义绑定，主流屏幕阅读器默认不会将无关联的脱标文本和相邻图标做关联识别

调整步骤 #

第一步：替换为WAI-ARIA推荐的sr-only兼容样式 #

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

该写法通过clip裁剪、负margin等属性，既保证元素视觉不可见，又不会被屏幕阅读器判定为需要跳过的隐藏内容，兼容所有主流设备和阅读器版本。

第二步：给心形图标添加语义绑定，避免独立sr-only文本无法关联 #

根据你心形图标的实现形式二选一即可：

• 如果你用的是❤字符、SVG等直接写在页面里的图标：直接给图标容器加属性即可，不需要额外加sr-only元素，代码示例：

  <span role="img" aria-label="心形">❤</span>
  

  其中role="img"会通知屏幕阅读器该元素是图片类内容，aria-label的内容会直接被朗读，全平台兼容效果最好。
• 如果你必须保留JSON里的sr-only文本配置：给心形图标加aria-labelledby属性，和sr-only文本的ID绑定，示例：

  <!-- 心形图标容器 -->
  <span role="img" aria-labelledby="heart-text">❤</span>
  <!-- 对应sr-only文本 -->
  <span id="heart-text" class="sr-only">心形</span>
  

验证注意事项 #

• 如果该心形是可交互元素（比如点击可收藏），还需要给图标容器加tabindex="0"属性保证键盘可聚焦，同时补充回车、空格触发的键盘事件
• 不要给图标或者sr-only元素加visibility: hidden、display: none属性，以上属性会被所有屏幕阅读器识别为隐藏内容，跳过朗读

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