如何隐藏文本并使屏幕阅读器可以访问它？

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

过去我确实遇到过这个问题。Bootstrap具有这个可爱的类sr-only，该类实际上隐藏了网页上的内容，但可由屏幕阅读器访问。您可以检查此link

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

.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>

我希望这会有所帮助。

Answer 2

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

Bootstrap“仅sr”类存在很多问题。

1. 首先，您会看到from this discussion负边距会导致VoiceOver出现问题。

2. 第二，您必须说明words wrapping one per line as screen readers do not read line breaks

3. 最后clip has been deprecated。

要固定点1，请不要添加负边距。

要固定点2，请添加clip，以确保单词不会以“每行一个”结尾，并导致单词被弄脏在一起。

[要固定点3，我们将white-space: no-wrap剪裁为一个0px的正方形，我们将clip-path: inset(50%)保留为覆盖范围大的那一刻，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 */
}

Answer 3

使用<p>visible text <span class="visually-hidden">hidden text</span></p>属性是一种方法（下面的示例）

是否有更优雅的方法可以实现这一目标？

不隐藏元素。是。我没有回答您的问题，但我正在解决问题。

屏幕阅读器只是辅助功能指南的一小部分人使用的辅助技术的一部分。

例如，假设您在全屏上没有全局视图时使用屏幕放大镜。想象一下有一些认知障碍，这使您难以计数或记住元素。

如果您确实认为信息对盲人很重要，那么肯定对他们和其他人都重要。

现在，它不是一个长文本，而是一个带有适当的咏叹调标签的小计数器：

aria-label