如何隐藏文本并使其可由屏幕阅读器访问?

2022-01-30 00:00:00 html css accessibility wai-aria

我有一个简单的文本，它会在某个操作上得到更新，我希望屏幕阅读器会宣布它.但我不希望该文本在网页上可见.我尝试了 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>

我希望这会有所帮助.

相关文章