使用 aria-describedby 和屏幕阅读器专用元素，某些屏幕阅读器不会读出

Question

我试图向屏幕阅读器用户提供一些有关链接列表及其代表内容的附加信息。

我没有在<ul>上放置一个 aria-label，据我所知这是不鼓励的，我已经放置了一个仅用于屏幕阅读器的元素。 然后我使用aria-describedby the 和 this 元素绑定在一起。

<span id="describer" aria-hidden=true> I'm a screenreader only element hidden with CSS</span>
<ul aria-describedby="describer">...</ul>

这似乎被建议为aria-describedby的正确用法，并且在 OSX 上使用 VoiceOver 时效果很好。 当用户在<ul>上导航时，会读出描述文本。

但是，它不适用于 NVDA，也不适用于 VoiceOver iOS 或 TalkBack Android。它不会读出屏幕阅读器的纯文本。

我正在努力寻找满足主要屏幕阅读器（VO、NVDA、TalkBack、JAWS）的解决方案。

我做错了什么？

Answer 1

当一个元素具有aria-hidden=true时，它将完全从可访问性树中删除，就好像它对于屏幕阅读器来说根本不存在一样。

在aria-describedby属性中，您引用了一个应该在可访问性树中不存在的元素。 所以你显然创建了一个未定义的行为。 一些屏幕阅读器会认为 aria-hidden=true 比aria-describedby更强，因此会表现得好像它不存在一样，而其他一些屏幕阅读器会认为aria-describedby更强并阅读描述，尽管它应该被隐藏。

目前还不是很清楚为什么你会像你的例子那样做某事。 如果它应该是对其他内容的描述，为什么要从可访问性树中隐藏该元素？ 那你为什么一开始就把它藏起来？

此外， aria-describedby与aria-label和aria-labelledby一样，在应用于非交互式元素时可能不适用于所有屏幕阅读器。 在非交互式元素上为普通用户和屏幕阅读器用户呈现不同内容的最安全替代方法是使用视觉隐藏文本，如下所示：

<span class="sr_only">This text is read by screen readers, but invisible on screen</span>
<span aria-hidden="true">This text is visible on screen, but ignored by screen readers</span>

你会在流行的框架中找到相应的sr_only CSS class ，有时称为visually-hidden或screenreader或screen-reader 。