对于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？对于标题,这不是一个好习惯,因为屏幕阅读器用户可以使用键盘命令在标题之间导航.此外,您还需要在标题上设置咏叹调级别以指示它的级别.

用于此目的的最佳标记是:

<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

Answer 2

在这种情况下，您可以使用一种模式，对屏幕阅读器隐藏可视文本，并隐藏屏幕阅读器文本以使其不可见。像这样：

<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，因为它会删除发送到辅助功能 API 的元素。

附带说明：role="heading"如果有的话请小心使用，如果是的话请使用适当的aria-leve="#"数字/级别。