如何對屏幕閱讀器隱藏ARIA-LIVE，但使他們可以在其中閱讀內容？

Question

我在頁面上的ARIA-LIVE塊如下所示：

<div
  aria-live='polite'
  role='log'
  aria-relevant='additions'
  aria-atomic='false'
  style='position: absolute; width: 1px; height: 1px; margin-top: -1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden;'>
  <div>message</div>
  <div>message</div>
</div>

而現在，如果我使用鍵盤箭頭，則屏幕閱讀器可以到達Aria-live區域，它位於頁面的最底部，並可以讀取其中包含的內容。

有沒有一種方法可以隱藏aria-alive區域，但同時又將其隱藏起來，以便讀者仍然可以正常閱讀其中的內容？

Answer 1

這有點像問如何將CSS display:none應用於元素，但仍然允許該元素可見。

您可以通過指定aria-hidden="true"從屏幕閱讀器隱藏元素。 如果您還擁有aria-live ，那么屏幕閱讀器將隱藏對該元素的任何更新，從根本上消除了擁有aria-live的目的。

最好的辦法是將標簽與該區域相關聯，以表明“此元素用於宣布動態更新”或類似的內容。 屏幕閱讀器用戶可能會找到它，但沒有任何傷害。 他們可以輕松地忽略它並繼續進行下一個元素。