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

Posted

技术标签:

【中文标题】如何仅从屏幕阅读器隐藏页面中的任何元素,而不是普通用户的页面?【英文标题】:How to hide any element from page only from Screenreader but not from page for normal users? 【发布时间】:2011-06-15 08:50:43 【问题描述】:

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

/* 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; 

【问题讨论】:

【参考方案1】:

在元素上使用这个:

aria-hidden="true"

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

【讨论】:

这不适用于 JAWS 12.0。虽然未来的辅助设备可能会支持此功能,但该功能目前尚未普遍实施。【参考方案2】:

我认为 Michael 的上述回复将是实现您想要的最合理和最正确的方式。正如他所指出的,唯一的问题是屏幕阅读器\浏览器支持。

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

<img src="visualcontentonly.png"  />

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

【讨论】:

【参考方案3】:

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

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

【讨论】:

我认为许多屏幕阅读器不支持 @media aural@media speech,尽管它们已经存在多年,所以 CSS3 语音似乎不太可能 糟透了。我希望这些东西能得到支持。这将使我们的生活变得更加轻松。

以上是关于如何仅从屏幕阅读器隐藏页面中的任何元素,而不是普通用户的页面?的主要内容,如果未能解决你的问题,请参考以下文章

如何使 JAWS 屏幕阅读器阅读标题文档以逐个字母而不是逐句阅读?

如何使用 Selenium Webdriver 捕获特定元素而不是整个页面的屏幕截图?我尝试了已经可用的答案

如何可访问地隐藏表格标题元素?

如何隐藏博客标签搜索中的小部件

如何从屏幕阅读器中隐藏“显示更多”按钮?

如何防止屏幕阅读器/旁白阅读隐藏在 WPF 中的控件?