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

【问题标题】：How to hide ARIA-LIVE from screen readers but make they will can read content inside?如何从屏幕阅读器中隐藏 ARIA-LIVE，但让他们可以阅读里面的内容？
【发布时间】：2019-07-29 00:34:48
【问题描述】：

我在 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 区域，但同时使其中的内容仍能被读者正常阅读？

【问题讨论】：

标签： accessibility wai-aria screen-readers nvda

【解决方案1】：

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

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

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

【讨论】：