如何从屏幕阅读器中隐藏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区域，它位于页面的最底部，并读取他包含的内容。

有没有办法隐藏咏叹调活着的区域，但同时使它的内容通常仍由读者阅读？

Answer 1

这有点像询问如何将CSS display:none应用于元素但仍允许元素被看到。

您可以通过指定aria-hidden="true"来隐藏屏幕阅读器中的元素。如果你也有aria-live，那么对该元素的任何更新都将被屏幕阅读器隐藏，基本上否定了拥有aria-live的目的。

关于您可以做的最好的事情是将标签与该区域相关联，以说“此元素用于宣布动态更新”，或类似的东西。屏幕阅读器用户可能会找到它，但它不会伤害任何东西。他们可以很容易地忽略它并转向下一个元素。