如何仅对屏幕阅读器隐藏页面中的任何元素，而不对普通用户隐藏页面中的任何元素？
如何仅对屏幕阅读器隐藏页面中的任何元素，而不对普通用户隐藏页面中的任何元素？
我知道这些片段，但我想从屏幕上隐藏一些东西，而不是从视觉上的页面上隐藏一些东西。屏幕阅读器应跳过隐藏部分。
/* 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; }
How to hide any element from page only from Screenreader but not from page for normal users?
I know these snippets but I want to hide something from screen redaer but not from page visually. Sscreen reader should skip the hidden part.
/* 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; }
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在元素上使用此选项：
这会正常向视力正常的用户显示元素，但屏幕阅读器不会大声朗读。
Use this on the element:
This displays the element as normal to sighted users, but doesn't get read aloud by a screen reader.
我认为迈克尔的上述回应将是完成你想要的事情的最语义合理和正确的方法。正如他指出的，唯一的问题在于屏幕阅读器\浏览器支持。
一种快速而肮脏的方法是将您想要的任何内容直观地显示为图像，然后为其分配一个空白的替代文本值，例如
您想要对屏幕阅读器用户隐藏的内容是什么？也许有更合适的方法来处理这个问题。虽然将其显示为图像是可行的，但从可访问性的角度来看，它可能会受到反对，具体取决于内容是什么。
I think Michael's response above would be the most semantically sound and proper way of accomplishing what you want. The only issue is on the screenreader\browser support as he points out.
A quick and dirty way is to display whatever content you want visually as an image and then assign it a blank alt text value e.g.
What is the content you are wanting to hide from screenreader users? There may be a more appropriate way of dealing with the issue. Whilst displaying it as an image would work, it may be frowned upon from an accessibility standpoint, depending on what the content is.
我不确定屏幕阅读器是否会遵守新的 CSS3 语音模块中的任何内容，但您可能可以测试一下，因为如果它有效的话，它似乎是最简单的选择。
http://www.w3.org/TR/css3-speech/
I'm not certain if Screen Readers will obey anything in the new CSS3 Speech Module, but it might be something you could test out, as it seems like the easiest option if it works.
http://www.w3.org/TR/css3-speech/