Chrome 忽略 aria-labelledby

Question

我最近发现，当可聚焦元素中包含一些内容并分配了 aria-labelledby 属性时，MacOS 的 VoiceOver 不会读取标签内的内容，而是读取焦点组件的内容

在不同的浏览器上尝试过：在 Safari (11.1.1) 中按预期工作，但在 Chrome (76.0.3809.100) 中失败。 还尝试改变两个元素的角色。

<p id="header">This text should be read</p>

<div tabindex="0" aria-labelledby="header">
  <span>Click me</span>
  <p>This text should not be read</p>
</div>

https://jsfiddle.net/2d9jn4hs/

当您在启用 VoiceOver 的情况下专注于 div 时，我希望听到 This text should be read 但会听到 Click me This text should not be read。

有什么建议吗？

Answer 1

看一下“Practical Support: aria-label, aria-labelledby and aria-describedby”，尤其是倒数第三个：

不要在span 或div 上使用aria-label 或aria-labelledby，除非给定role。当 aria-label 或 aria-labelledby 处于交互式角色（例如链接或按钮）或 img 角色时，它们会覆盖 div 或 span 的内容。除了地标（上面讨论过）之外的其他角色被忽略。

强调的文字“他们 [aria-labelled] 覆盖了 div 或 span 的内容”，听起来像是您正在寻找的行为。

因此，您需要为“可点击”事物指定 role，最好是交互式角色，例如 Widget Role

Answer 2

首先你想达到什么目的？

在我看来，Chrome 的行为符合预期，而 Safari 在这里失败了。

编辑 - 实际上在重新阅读之后，由于您的措辞，我无法判断哪个行为正确....但是您的期望是错误的，您确实应该听到click me This text should not be read

我不希望不阅读可聚焦 div 中的文本....想象一下，通过向没有视力障碍的人显示一组文本，然后向盲人显示一组完全不同的信息，您可以做多少险恶的事情人们。 （虽然这是完全可能的......）

我的建议.....重新考虑您要达到的目标，并使每个人的信息都相同。

如果您需要为屏幕阅读器添加额外信息，请尝试下面的“视觉隐藏”类，它允许您完全隐藏有视力的用户的信息，但仍让屏幕阅读器用户阅读。

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ <- if you REALLY must support ie7 and 6!
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}