ios - 对于 iOS、Safari、VoiceOver，如何让 VoiceOver 阅读文本内容以外的内容？

Question

我试图让 VoiceOver 说出 HTML span 元素中指定文本内容以外的内容:

<span tabindex="0" class="myClassName" id="DateLabel" role="heading">1:02a</span>

考虑我可能希望 VoiceOver 说出完整文本的情况。

当我添加 aria-label 属性时，VoiceOver 仍在朗读文本，尽管 IE 和 Chrome 等桌面浏览器正确地朗读了 aria-label。

当我添加 aria-labelledby 属性和一个隐藏的 aria 标签元素时，我能够让 VoiceOver 朗读替代旁白，而不是文本内容。但是，我发现这仅在 aria-role 是按钮或链接之类的小部件角色时才有效。这很糟糕，因为我不想向用户暗示这是他们可以激活的交互式元素。 VoiceOver 恼人地将“按钮”附加到叙述序列的末尾。我更愿意使用像“标题”这样的结构角色，但 VoiceOver 只是恢复阅读文本内容而不是阅读我隐藏的旁白。

求助!我一直反对这个，但我无法忍受 iOS 对 ARIA 的非标准实现。我不明白为什么它们必须与桌面浏览器不同，因为它们是如此简单，但它们在很多地方，我找不到一个好的文档来概述任何地方的确切行为。

Answer 1

您可以像这样使用 aria-label:

<span tabindex="0" class="myClassName" id="DateLabel" role="heading" aria-label="1 0 2 am">1:02a</span>

但是，为什么要将 tabindex 设置为 0？对于标题，这不是一个好的做法，因为屏幕阅读器用户可以使用键盘命令在标题之间导航。此外，您需要在标题上设置 aria-level 以指示它是什么级别。

为此使用的最佳标记是:

<span class="myClassName" id="DateLabel" role="heading"
aria-level="2" aria-label="1 0 2 am">1:02a</span>

更新:这似乎不再适用于至少某些版本的 VoiceOver，它将读取可见内容并忽略 aria-label。查看此错误 - https://bugs.webkit.org/show_bug.cgi?id=160009