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

现在，如果我使用键盘箭头，屏幕 reader 可以到达 aria-live 区域，它位于页面的最底部，并阅读他包含的内容。

有没有办法隐藏 aria-alive 区，同时让reader能正常读取里面的内容？

Answer 1

这有点像问如何将 CSS display:none 应用到一个元素，但仍然允许看到该元素。

您可以通过指定 aria-hidden="true" 从屏幕 reader 中隐藏元素。如果您还有 aria-live，那么对该元素的任何更新都将从屏幕 reader 中隐藏，这基本上否定了 aria-live.

的目的

您最多可以将标签与该区域相关联，例如 "this element is for announcing dynamic updates" 或类似内容。屏幕 reader 用户可能会找到它，但它不会造成任何伤害。他们可以轻松忽略它并转到下一个元素。

如何对屏幕阅读器隐藏 ARIA-LIVE，但让他们可以阅读里面的内容？

How to hide ARIA-LIVE from screen readers but make they will can read content inside?

accessibility

screen-readers

wai-aria

nvda