9

如何仅从屏幕阅读器隐藏页面中的任何元素，而不是普通用户的页面？

我知道这些片段，但我想从屏幕显示器中隐藏一些东西，而不是从页面视觉上隐藏。屏幕阅读器应该跳过隐藏部分。

/* Hide for both screenreaders and browsers
      css-discuss.incutio.com/wiki/Screenreader_Visibility */
    .hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders
    www.webaim.org/techniques/css/invisiblecontent/ ; &  j.mp/visuallyhidden ; */
   .visuallyhidden { position: absolute !important;   
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
   .invisible { visibility: hidden; }
4

3 回答 3

6

在元素上使用它：

aria-hidden="true"

这会将元素正常显示给有视力的用户，但不会被屏幕阅读器大声朗读。

于 2012-11-27T10:14:25.723 回答
3

我认为迈克尔上面的回应将是完成你想要的最合理和正确的方式。正如他所指出的，唯一的问题是屏幕阅读器\浏览器支持。

一种快速而肮脏的方法是将您想要的任何内容以视觉方式显示为图像，然后为其分配一个空白的替代文本值，例如

<img src="visualcontentonly.png" alt="" />

您想对屏幕阅读器用户隐藏哪些内容？可能有更合适的方式来处理这个问题。虽然将其显示为图像会起作用，但从可访问性的角度来看，它可能会令人不悦，这取决于内容是什么。

于 2011-01-25T18:25:47.190 回答
0

我不确定屏幕阅读器是否会遵守新的 CSS3 语音模块中的任何内容，但这可能是您可以测试的内容，因为如果它有效，它似乎是最简单的选择。

http://www.w3.org/TR/css3-speech/

于 2011-01-25T17:36:27.153 回答