如何隐藏文本并使屏幕阅读器可以访问它? [英] 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屋！