如何隐藏文本并使其可通过屏幕阅读器访问? [英] How to hide a text and make it accessible by screen reader?

问题描述

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

I have a simple text that gets updated on an action and I want that to be announced by the screen reader. But I don't want that text to be visible on the web page. I tried display: none and visibility: hidden, but seems like they are not accessible by the screen reader softwares. I found a way to make this work - that is by absolute positioning the element all the way with negative 999999 value which will make it off screen and hidden from the webpage. I am not really a fan of this solution. Is there a more elegant way to achieve this?

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

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

推荐答案

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

I did encounter this problem in the past. Bootstrap has this sweet class sr-only that actually hides the content on the webpage but is accessible by the screen readers. You can check this link

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

Moreover, if you are not using bootstrap, you can simply implement the class yourself in your code.

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

我希望这会有所帮助.

这篇关于如何隐藏文本并使其可通过屏幕阅读器访问?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！