iOS Voice Over 读取 Aria-Label 失败

iOS Voice Over Failed to Read Aria-Label

iOS 画外音不朗读 aria-label。 Chrome 和 Android 工作正常。这是示例代码:

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

对于 iOS 画外音,它只显示为“link”

我从另一个 post 那里看到,这是 iOS 版本 iOS 10 上的一个错误,但它应该适用于 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>

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

如果您检查 <span> 元素的可访问性属性,它 确实 有一个可访问的名称并且该名称 应该 公布所有屏幕 readers,但如果 <span> 为空,VoiceOver 和 NVDA 显然都有问题。

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

“名称”的“计算属性”设置为您的aria-label,它甚至说这是名称的来源,因此从技术上讲应该公布。

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

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

(顺便说一句,感谢您提到 another question 我几年前就回答过)。