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

首先你想达到什么目的？

在我看来 Chrome 表现符合预期，Safari 在这里失败了。

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

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

我的建议......重新考虑你想要实现的目标，并让每个人都获得相同的信息。

如果您需要为屏幕 reader 添加额外的信息，请尝试下面的 'visually hidden' class，它可以让您完全隐藏视力正常的用户的信息，但仍然可以将其读取到屏幕reader 个用户。

.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;
}

Answer 2

看看“Practical Support: aria-label, aria-labelledby and aria-describedby”，特别是倒数第三个项目符号：

Don't use aria-label or aria-labelledby on a span or div unless its given a role. When aria-label or aria-labelledby are on interactive roles (such as a link or button) or an img role, they override the contents of the div or span. Other roles besides Landmarks (discussed above) are ignored.

强调的文本 "they [aria-labelled] override the contents of the div or span" 听起来像您正在寻找的行为。

所以你需要指定一个role for your "clickable" thing, preferably a role that is an interactive role such as a Widget Role

Chrome 忽略 aria-labelledby

Chrome ignores aria-labelledby

html

accessibility

screen-readers

voiceover

wai-aria