对于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 label元素时，我能够让VoiceOver读取备用旁白，而不是文本内容。但是，我发现只有当aria-role是按钮或链接之类的小部件角色时，这才能起作用。这很糟糕，因为我不想向用户暗示这是一个他们可以激活的交互式元素。VoiceOver恼人地将"button“附加到叙述序列的末尾。我更喜欢使用像“标题”这样的结构角色，但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-。查看此错误- https://bugs.webkit.org/show_bug.cgi?id=160009

Answer 2

在我的例子中，我使用了iOS VoiceOver：

<span role="text" aria-label="audible text">visible text</span>

添加属性role="text"非常重要，这样VoiceOver才能读取attribute aria-label=""

Answer 3

在这种情况下，您可以使用一种模式，向屏幕阅读器隐藏视觉文本，并从视觉上隐藏屏幕阅读器文本。如下所示：

<span aria-hidden="true">1:02a Dec</span>
<span class="visually-hidden">1:02 AM December</span>

并使用CSS隐藏.visually-hidden，例如：

.visually-hidden {
  position: absolute;
  left: -999em;
}

不要使用display:none，因为它删除了发送到可访问性应用编程接口的元素。

附带说明:如果有，请谨慎使用role="heading"，如果需要，请使用适当的aria-leve="#"编号/级别。