使用 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 。