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恼人地追加＆＃34;按钮＆＃34;到叙述序列的结尾。我更喜欢使用像＃34; heading＆＃34;这样的结构角色。但是VoiceOver只是恢复阅读文本内容而不是阅读我隐藏的叙述。

请帮忙！我一直在反对这一点，但我根本无法忍受iOS的ARIA非标准实施。我不明白为什么他们必须与桌面浏览器有所不同，因为它们很简单，但它们在很多地方，我找不到一个好的文档，概述了任何地方的确切行为。

Answer 1

您可以像这样使用咏叹调标签：

<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

就我而言，我用于iOS VoiceOver：

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

添加属性role="text"非常重要，以便VoiceOver读取属性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，因为它会将元素从发送到辅助功能API中删除。

作为旁注：如果有的话，请谨慎使用role="heading"，如果是，请使用适当的aria-leve="#"数字/级别。

Answer 4

您可以使用abbr html元素。

例如：

<abbr title="HyperText Markup Language">HTML</abbr>

对于iOS，Safari，VoiceOver，如何让VoiceOver读取文本内容以外的内容？

4 个答案: