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>
添加一些“内容”来解决它。如果您不想看到任何视觉效果,请使用
。
<span aria-label="This is the aria-label text" class="c-glyph video-icon" role="link" tabindex="0"> </span>
(顺便说一句,感谢您提到 another question 我几年前就回答过)。
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>
添加一些“内容”来解决它。如果您不想看到任何视觉效果,请使用
。
<span aria-label="This is the aria-label text" class="c-glyph video-icon" role="link" tabindex="0"> </span>
(顺便说一句,感谢您提到 another question 我几年前就回答过)。