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

Question

我有一个简单的文本，它会根据某个动作进行更新，我希望屏幕阅读器能够宣布它。 但我不希望该文本显示在 web 页面上。 我试过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”class 的更好解决方案。

引导程序“仅限 sr”class 存在许多问题。

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

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

3. 最后clip已被弃用。

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

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

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

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

我在几个不同的论坛上有这个 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 2

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

此外，如果您不使用引导程序，您可以简单地在您的代码中自己实现 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 3

使用aria-label属性是一种方法（下面的示例）

有没有更优雅的方法来实现这一点？

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

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

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

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

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

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

Answer 4

我遇到了同样的问题，文本超出了 position，上面提到的视觉隐藏 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;
}