如何对屏幕阅读器隐藏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的目的。

最好的办法是将标签与该区域相关联，以表明“此元素用于宣布动态更新”或类似的内容。 屏幕阅读器用户可能会找到它，但没有任何伤害。 他们可以轻松地忽略它并继续进行下一个元素。