iOS 14 Voice Over无法读取aria-label属性问题咨询

这是iOS WebKit内核的遗留兼容性问题，即使官方宣称iOS 12版本已修复该类aria-label读取故障，实际在iOS 14及更高版本中，空可交互元素的aria-label识别失效问题仍会复现，不属于代码编写错误。

故障根因 #

iOS端所有浏览器都强制使用WebKit内核，其内置的VoiceOver读屏逻辑会优先扫描元素的可见文本节点，若元素完全没有可见内容，大概率会直接跳过aria-label属性的读取，该表现不符合WAI-ARIA官方规范，但属于iOS平台的已知兼容问题，仅影响iOS设备，安卓、桌面端Chrome均无此类问题。

修复方案 #

推荐优先使用视觉隐藏文本方案替代aria-label，该方案兼容性覆盖所有读屏设备，无平台适配问题：

• 先定义通用的屏幕阅读器专属样式类，该类元素会在视觉上完全隐藏，不占用页面布局，仅能被读屏设备识别：

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

• 调整原空span的代码结构，将文本内容放在视觉隐藏的子节点内：

<span class="c-glyph video-icon" role="link" tabindex="0">
  <span class="sr-only">This is the aria-label text</span>
</span>

• 如果必须保留aria-label的写法，可以尝试给元素添加与aria-label值相同的title属性兜底，大部分场景下可以触发iOS VoiceOver的读取。

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