html - 隐藏元素但为屏幕阅读器保留(不能使用显示 :none, 可见性 :hidden, 或不透明度: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； 左:-999em； }

效果很好，解决了我的问题。但这有点骇人听闻。我想问:有没有更好、更标准的方法来解决这个问题？

Answer 1

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

需要的 CSS 属性比您尝试的要多。参见 What is sr-only in Bootstrap 3?了解详情。

另外，您可以搜索“visually-hidden”类。

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

另外，你对role="alert"的理解不太准确。

The way to announce something is by creating an element with role=alert (no other way to do it, there's no JS function to directly "speak" to a reader, for example):

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

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

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

中，新文本将被宣布。

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

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

屏幕阅读器用户可以使用屏幕阅读器中定义的快速导航键(例如 H 转到下一个标题 [h1、h2、h3 等]，或 T 转到下一个表格，或 L 转到下一个列表等)，前提是您的 HTML 使用语义元素(例如

、 <表>、

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

关于html - 隐藏元素但为屏幕阅读器保留(不能使用显示 :none, 可见性 :hidden, 或不透明度:0)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54298490/