隐藏元素但为屏幕阅读器保留（不能使用 display:none、visibility:hidden 或 opacity:0）

Question

我的 HTML 中有一个音频元素，其唯一目的是通过屏幕阅读器向盲人用户发布公告。它是一个 DIV，但对普通用户是不可见的。

宣布某事的方法是使用role=alert 创建一个元素（没有其他方法可以做到这一点，例如，没有 JS 函数可以直接与读者“对话”）：

<!-- This element can be dynamically added OR shown (via JS) to make a Screen Reader announcement -->
<div role="alert">This will be announced to Screen Readers.</div>

但是，我不能让普通用户看到这个“音频助手”元素。

1) 不能使用display: none； -> 屏幕阅读器不会读取它

2) 无法使用 visibility: hidden; -> 屏幕阅读器无法读取它

3) 不能使用opacity: 0; -> 因为占用空间，布局必须完全一样

我找到了这个解决方案： https://stackoverflow.com/a/25339638/1005607

div { position: absolute; left: -999em; }

这很好用，它解决了我的问题。但这有点像黑客。我想问：有没有更好、更标准的方法来解决这个问题？

Answer 1

使用 CSS 以视觉方式隐藏元素但允许屏幕阅读器用户发现它是一种常见做法。它不一定被视为“黑客”。

需要的 CSS 属性比您尝试的要多。有关详细信息，请参阅What is sr-only in Bootstrap 3?。

此外，您还可以搜索“视觉隐藏”类。

sr-only 和 visually-hidden 都是常用名称，用于命名视觉上隐藏元素的类。

另外，您对role="alert" 的理解也不是很准确。

宣布某事的方法是创建一个带有 role=alert 的元素（没有其他方法可以做到这一点，例如，没有 JS 函数可以直接与读者“对话”）：

role="alert" 有一个隐含的aria-live="assertive"。带有aria-live 的元素将向屏幕阅读器宣布对该元素的更改。它不会自动宣布该元素。例如，

<div id="foo" aria-live="polite"></div>
<button onclick="document.getElementById("foo").innerHTML = 'hello'">update</button>

当我点击按钮时，文本将被注入到

中，新的文本将被宣布。

一般来说，您希望使用aria-live="polite" 而不是aria-live="assertive"。当你使用role="alert" 时，你会得到aria-live="assertive"。

因此，如果您的页面正在更新其内容，那么使用aria-live 是正确的做法。但它不会因为您的页面加载而导致宣布某些内容。

屏幕阅读器用户有多种方法可以使用屏幕阅读器中定义的快速导航键（例如 H 转到下一个标题 [h1、h2、h3 等] 来导航网站，或 T 转到下一个表，或 L 转到下一个列表等），前提是您的 HTML 使用语义元素（例如

、

、

等）。如果您有对视力正常的用户隐藏的文本，则屏幕阅读器用户可以找到该文本，而无需您强制其自动阅读。

【讨论】：

Answer 2

我不确定这是否是一种“更好”的方式，但这会将其隐藏在适当的位置。

div {
  overflow:hidden;
  height:0;
  width:0;
}