如何隐藏文本并使其可通过屏幕 reader 访问？

Question

我有一个简单的文本，它会根据某个动作进行更新，我希望它在屏幕上显示 reader。但我不希望该文本在网页上可见。我尝试了 display: none 和 visibility: hidden，但屏幕 reader 软件似乎无法访问它们。我找到了一种方法来完成这项工作 - 即通过绝对定位元素一直使用负 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 有一个可爱的 class sr-only，它实际上隐藏了网页上的内容，但屏幕阅读器可以访问。你可以检查这个link

此外，如果您不使用 bootstrap，您可以简单地在代码中自己实现 class。

.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

bootstrap“sr-only”的更好解决方案class。

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

首先您会看到from this discussion负边距会导致 VoiceOver 出现问题。
其次你必须考虑words wrapping one per line as screen readers do not read line breaks
终于clip has been deprecated.

要修复点 1，只需不要添加负边距即可。

要修复第 2 点，请添加 white-space: no-wrap 以确保单词不会以 'one per line' 结尾并导致单词混在一起。

为了修正第 3 点，我们添加 clip-path: inset(50%) 作为一个 0px 的正方形，我们保留 clip 因为目前它有很大的覆盖范围，clip-path 用于未来-验证您的解决方案。

请在下面找到更强大的 class，到目前为止，我还没有找到无法按预期工作的屏幕 reader/浏览器组合。

我在几个不同的论坛上有这个 class 正在测试，到目前为止还不错，但是如果有人发现它有问题请告诉我，因为我会在所有地方提交它。

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

使用 aria-label 属性是可行的方法（示例如下）

Is there a more elegant way to achieve this?

不隐藏元素。是的。我不是在回答你的问题，而是在解决问题。

屏幕阅读器只是辅助技术的一个子部分，被无障碍指南所针对的一小部分人使用。

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

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

现在，它不再是长文本，而是带有适当 aria 标签的小计数器：

<div role="status" aria-live="polite" aria-label="5 selections have been made.">
  5 selections
</div>

Answer 4

我遇到了同样的问题，文本与上面提到的视觉隐藏 class 错位。 class 的一些小改动为我解决了这个问题

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

如何隐藏文本并使其可通过屏幕 reader 访问？

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

html

css

accessibility

wai-aria

bootstrap“sr-only”的更好解决方案class。