H1 中的换行符将元素转变为 VoiceOver 组

Question

出于设计原因，我使用 a <br>inside a，例如：<h1>

<h1>This is a <br>headline</h1>

但请注意，它会将元素变成一个“组”，VoiceOver 将其读取为单独的项目，例如：

标题级别 1“这是一个...标题”第3
组
项目 “这是一个”
“标题”
“空组”

向 only添加aria-hidden="true"或role="presentation"属性<br>会删除“空组”公告，但 VoiceOver 仍将 视为H1“组”。

是否可以在不通过 VoiceOver 将其宣布为“组”的br情况下将元素存在于内部？h1

Answer 1

我想整合一些评论以使其更易于阅读。

但首先需要澄清一下。“群组”通知是通过Mac上的 VoiceOver 进行的。在 iOS 上，您不会通过VoiceOver听到“群组” 。 我没有 Mac 来测试这些，但我在 iPhone 上尝试过。

无论“组”公告如何，我的测试主要是将标题作为一个元素而不是分成两个元素，尽管从语义上讲，您的标题是两个元素，因为您有一个<br>. 这与最初问题的要点无关，因为您主要是问如何删除“组”公告，而不是如何将标题作为一个元素来阅读。但尽管如此，这里还是一些强制标题被解读为一个的测试结果。最后一个例子可能有一个额外的好处，即消除了“组”公告。

提出了以下想法：

原始代码：

<h1>This is a <br>headline</h1>

在 iOS 上使用 VO 向右滑动时：

• “这是 1 级标题”
• “标题，标题级别 1”

PC 上的 NVDA，使用向下箭头导航：

• “标题级别 1 这是一个”
• “标题级别 1 标题”

PC 上的 JAWS，使用向下箭头进行导航：

• “标题级别 1 这是一个”
• “标题级别 1 标题”

除了 Mac 上的“团体”公告之外，这是我所期望的。

第一个建议：

<h1 aria-label="This is a headline">This is a <br>headline</h1>

在 iOS 上使用 VO 向右滑动时：

• “这是一个标题，标题级别 1”
• “这是一个标题，标题级别 1”

由于标题仍然是两个元素（因为<br>），但aria-label应用了 (*)，因此您会听到aria-label标题的两个部分的 。

(*) 请注意，正确使用时aria-label会覆盖子元素，这将在下面所有这些示例之后解决。

PC 上的 NVDA，使用向下箭头导航：

• “标题级别 1 这是标题”

aria-label应用an 时，NVDA 没有第二个元素，因为 会aria-label替换所有子元素的内容。请参阅https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label，特别是：

当应用于具有支持从子内容命名的角色之一的元素时，aria-label会对辅助技术用户隐藏后代内容并将其替换为 的值aria-label。

如果您按照子内容链接的命名进行操作，则标题就是元素之一。

PC 上的 JAWS，使用向下箭头进行导航：

• “标题级别 1 这是一个”
• “标题级别 1 标题”

JAWS 完全忽略它aria-label，您将得到与原始代码相同的结果。

第二个建议：

<h1 aria-label="This is a headline"><span aria-hidden="true">This is a <br>headline</span></h1>

在 iOS 上使用 VO 向右滑动时：

• “这是一个标题，标题级别 1”

没有第二个元素。受到aria-label尊重，并且aria-hidden本质上隐藏了标题本身的内部文本。aria-hidden实际上应该没有任何效果，因为aria-label如上所述，它将覆盖所有子元素 (*)。

(*) 请注意，正确使用时aria-label会覆盖子元素，这将在下面所有这些示例之后解决。

PC 上的 NVDA，使用向下箭头导航：

• “标题级别 1 这是标题”

NVDA 没有区别。没有aria-hidden影响，这是我所期望的，这也是为什么我对它影响 VoiceOver 感到困惑。

PC 上的 JAWS，使用向下箭头进行导航：

• ””

什么也没读到，大概是因为aria-hidden 和因为 JAWS 不遵守aria-label标题，这是下面 (*) 注释的一部分。由于 JAWS 看不到aria-label且标题内容被隐藏，因此没有任何内容可阅读。

第三个建议：

<h1><span role="text">This is a <br>headline</span></h1>

在 iOS 上使用 VO 向右滑动时：

• “这是一个[暂停]标题，标题级别 1”

没有第二个元素，因为它role="text"会删除所有子元素并仅连接文本。然而，VO 的宣布与前面的示例略有不同，并且在“a”和“标题”之间有一个短暂的停顿，就好像它们之间有一个逗号一样。

PC 上的 NVDA，使用向下箭头导航：

• “标题级别 1 这是一个”
• “标题级别 1 标题”

PC 上的 JAWS，使用向下箭头进行导航：

• “标题级别 1 这是一个”
• “标题级别 1 标题”

由于role="text"不是批准的角色，因此此示例与 NVDA 或 JAWS 的原始示例没有任何区别。然而，Apple 实现了这一角色，并以 VoiceOver 为荣，只要您意识到它不会对其他屏幕阅读器产生影响，它有时确实会派上用场。我用过role="text"在生产级代码中使用过，但需要注意的是，Apple 可能随时取消支持。但该生产代码是 10 年前编写的，而且仍然运行良好。

(*) 关于aria-label正确使用的评论

看一下“ 2.10 实际支持：aria-label、aria-labelledby 和 aria-scribedby ”，特别是第 7 个要点：

不要在任何标题元素上aria-label使用或 ，因为它会覆盖 NVDA、VoiceOver 和 Talkback 上的它们。**JAWS 忽略它们。**aria-labelledby

因此强烈建议不要aria-label在标题上使用 an 。

一种将标题读为一行的方法，所有屏幕阅读器都支持这种方法，并且可能会消除“组”公告

<h1>
  <span aria-hidden="true">
    This is a <br>headline
  </span>
  <span class="sr-only">
    This is a headline
  </span>
</h1>

您基本上有两个标题。第一个是针对视力正常的用户，被屏幕阅读器忽略，第二个是针对屏幕阅读器用户，不会为视力正常的用户显示。

“仅限 sr”类别没什么特别的。它只是“仅屏幕阅读器”CSS 的常用名称。您可以在 Bootstrap 3 中什么是 sr-only？中查看更多相关信息。

我相信这个例子也将消除“组”公告，但我没有 Mac 来测试它。