时间戳

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

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

问题描述

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

标签： accessibilitywai-ariascreen-readersnvda

解决方案

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

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

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

推荐阅读