iOS Safari下VoiceOver不读取aria-label但Chrome屏幕阅读器可正常读取问题咨询

问题成因 #

这个问题是iOS Safari + VoiceOver的可访问性树（Accessibility Tree）构建规则导致的，核心原因有3个：

1. 你当前使用的<i>标签本身无默认语义，在Safari的默认规则中被归类为装饰类元素，如果没有显式声明角色，其绑定的aria-label不会被注入到可访问性树中，屏幕阅读器自然无法读取。
2. 从你描述的“仅播报链接”的现象可以判断，你实际生产环境的代码中，这个图标元素应该被包裹在<a>标签内。当父元素是可交互元素、子元素无显式语义角色时，VoiceOver会优先继承父级的交互语义，直接忽略子元素的aria属性。
3. 部分版本的iOS Safari会对没有tabindex、role等可访问性属性的匿名 inline 元素直接跳过aria属性解析，只识别其外层的可交互节点属性。

修复方案 #

可以任选以下任意一种方案修复：

• 给<i>元素显式声明role="img"，明确告知浏览器这是一个图像类内容，此时绑定的aria-label就会被VoiceOver正常识别：

<div class="search-result">
     <i class="c-glyph" role="img" aria-label="there is video inside"></i>
</div>

• 如果这个图标是可交互点击目标，直接把aria-label加在外层的<a>或者<button>标签上，同时给<i>加aria-hidden="true"避免重复识别：

<a href="xxx" aria-label="there is video inside">
  <i class="c-glyph" aria-hidden="true"></i>
</a>

• 如果需要图标本身作为独立可聚焦节点，给它加tabindex="0"以及对应的交互role，确保浏览器将其识别为独立可访问节点。

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