iOS Voice Over 无法读取 Aria-Label

Question

iOS Voice Over 无法读取aria-label。 Chrome 和 Android 运行良好。这是示例代码：

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

对于 iOS Voice Over，它只显示“链接”

我从另一个post 看到，这是 iOS 10 版本的 iOS 上的错误，但它在 iOS 12 上应该可以正常工作。但是，我的设备是 iOS 14。这是来自 iOS 的错误吗？

编辑：

下面是更完整的代码：

<div class="result_data">
     <div class="facet-type">
          <span>facet type value</span>
     </div>
     <h4>title text</h4>
     <div class="result_indicators">
          <span class="c-glyph" role="presentation"></span>
          <span aria-label="This is the aria-label text" class="c-glyph video-icon" role="link" tabindex="0"></span>
     </div>
 </div>

Answer 1

它似乎是特定于屏幕阅读器的。您的示例不适用于 NVDA，但确实适用于 JAWS。 TABBING 到 NVDA 的空白跨度只是说“空白”，而 JAWS 读取 aria-label。所以 NVDA 和 VoiceOver 的行为相似（尽管 VoiceOver 甚至不允许我通过向右滑动导航到空的 <span> 而 NVDA 让我 TAB 到它）。

如果您检查 <span> 元素的可访问性属性，它确实有一个可访问的名称，并且该名称​​应该由所有屏幕阅读器宣布，但显然 VoiceOver 和如果<span> 为空，NVDA 会出现问题。

这是 Chrome 版本的辅助功能属性：

“名称”的“计算属性”设置为您的aria-label，它甚至说这就是名称的来源，所以从技术上讲，它应该被宣布。

问题是因为<span> 没有任何内容。应该向 Apple（用于 VoiceOver）和 NVDA 报告一个错误，但与此同时，您可以通过向<span> 添加一些“内容”来解决它。如果您不想看到任何视觉效果，请使用  。

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

（顺便说一句，感谢您提到我几年前回答过的another question）。