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

【问题标题】：For iOS, Safari, VoiceOver, how do I get VoiceOver to read something other than the text content?对于 iOS、Safari、VoiceOver，如何让 VoiceOver 读取文本内容以外的内容？
【发布时间】：2014-05-07 19:03:49
【问题描述】：

我试图让 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 的非标准实现。我不明白为什么它们必须与桌面浏览器不同，因为它们如此简单，但它们存在于很多地方，我无法找到一个好的文档来概述任何地方的确切行为。

【问题讨论】：

标签： ios accessibility voiceover wai-aria

【解决方案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

【讨论】：

这对我来说失败了。使用此标记 - 可见文本 VoiceOver 读取“可见文本”
@launchoverit 那是因为您没有使用我指定的所有标记。 role="heading" 很重要，因为尽管规范允许 aria-label 用于任何角色，但它目前仅适用于某些角色。此外，如果您因为没有使用指定的所有标记而对此投了反对票，那么这并不酷。
感谢您对角色的澄清，我也尝试了您的完整标记，但没有成功，所以我认为发布更基本的标记会简化我的观点（这显然是错误的，抱歉）。这是一个带有您的标记的代码笔，它仍然为我读取“可见文本”。 codepen.io/anon/pen/dXdEXx.
看起来这在某些版本的 VoiceOver 中已损坏。我让转子显示“可听文本”，而 VO 仍然说“可见文本”。这显然是一种回归。
我已经向 Apple bugs.webkit.org/show_bug.cgi?id=160009 报告了一个错误，我们应该跟踪它。该技术在其他 AT 中仍然有效，并且符合标准。如果您想添加有关在 VO 中缺乏对这种技术的支持的信息，我认为这会很有用。

【解决方案2】：

就我而言，我使用的是 iOS VoiceOver：

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

添加属性role="text" 很重要，以便 VoiceOver 读取属性aria-label=""

【讨论】：

尽管“文本”不是官方接受的角色值，但这对我有用
工作到最新的 iOS 13 更新，但不再。

【解决方案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="#" 数字/级别。

【讨论】：

我认为 Daniel 的意思是说 role=heading 而不是 aria-heading。标题对于辅助技术用户来说非常强大，因为 VoiceOver 或 JAWS 等屏幕阅读器允许用户按标题导航，因此在屏幕上移动非常快。使用 role=heading 时，您不一定必须使用 aria-level。如果你想模仿
标签，那么是的，你需要 aria-level=2。但是，如果您正在显示一个可滚动的选项列表，其中选项被组合在一起（例如所做的），那么您不想要 aria-level 集。你只需要角色=标题。
@slugolicious 谢谢，这正是我的意思:) 以及省略aria-level 的好处，例如<optgroup>

【解决方案4】：

您可以使用 abbr html 元素。

例如：

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

【讨论】：

缩写词在所有屏幕阅读器中的读取不一致

标签，那么是的，你需要 aria-level=2。但是，如果您正在显示一个可滚动的选项列表，其中选项被组合在一起（例如 所做的），那么您不想要 aria-level 集。你只需要角色=标题。

标签，那么是的，你需要 aria-level=2。但是，如果您正在显示一个可滚动的选项列表，其中选项被组合在一起（例如所做的），那么您不想要 aria-level 集。你只需要角色=标题。