隐藏元素但保留给屏幕阅读器（不能使用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使用的是语义元素（例如

， ，

等）。如果您的文字对视力不佳的用户隐藏了，那么屏幕阅读器用户便可以找到该文字，而无需您强制自动阅读。

答案 1 :(得分：1)

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

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

相关问题
• 为什么jQuery显示/隐藏使用display：none而不是visibility：hidden？
• 谷歌索引页面是否具有不透明度：0或隐藏或显示：无
• visibility：hidden vs display：none vs opacity：0
• 隐藏大元素而不使用display：none或visibility：hidden
• 仅为屏幕阅读器隐藏文本
• 为屏幕阅读器隐藏纯粹的装饰元素？
• 显示：无或可见性：在页面加载时隐藏在body元素上 - 它是否会影响SEO？
• Jquery fadeIn（），不透明度：0或可见性：隐藏
• CSS属性“ opacity”是否仅在完全为0时才对屏幕阅读器隐藏内容？
• 隐藏元素但保留给屏幕阅读器（不能使用display：none，visibility：hidden或opacity：0）
最新问题
• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 2

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

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