How to hide a text and make it accessible by screen reader?

Question

我有一个简单的文本，它会更新一个动作，我希望屏幕阅读器可以宣布它。但我不希望该文本在网页上可见。我试过display: none和visibility: hidden，但似乎屏幕阅读器软件无法访问它们。我找到了一种方法来完成这项工作 - 即通过使用负 999999 值一直绝对定位元素，这将使其离开屏幕并从网页中隐藏。我不是这个解决方案的粉丝。有没有更优雅的方法来实现这一目标？

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}

Answer 1

引导程序“仅限 sr”类的更好解决方案。

Bootstrap“sr-only”类有很多问题。

1. 首先，您将从本次讨论中看到，负边距会导致 VoiceOver 出现问题。

2. 其次，您必须考虑每行一个换行的单词，因为屏幕阅读器不会读取换行符

3. 终于clip被弃用了。

要解决第 1 点，只需不要添加负边距。

要解决第 2 点，请添加white-space: no-wrap以确保单词不会以“每行一个”结尾并导致单词混淆在一起。

为了修复第 3 点，我们clip-path: inset(50%)将此剪辑添加到 0px 正方形，我们保持clip目前它具有很大的覆盖范围，clip-path用于为您的解决方案提供面向未来的证明。

请在下面找到一个更强大的类，到目前为止，我还没有找到不能按预期工作的屏幕阅读器/浏览器组合。

我在几个不同的论坛上测试了这门课，到目前为止一切都很好，但如果有人能发现它的问题，请告诉我，因为我会在任何地方提交它。

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<p>visible text <span class="visually-hidden">hidden text</span></p>

Answer 2

我过去确实遇到过这个问题。Bootstrap 有一个甜蜜的类sr-only，它实际上隐藏了网页上的内容，但屏幕阅读器可以访问。你可以检查这个链接

此外，如果您不使用引导程序，您可以简单地在代码中自己实现该类。

.aria-invisible {
      border: 0; 
      clip: rect(0 0 0 0); 
      height: 1px;  
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

<span class="aria-invisible">5 selections have been made. </span>

我希望这有帮助。