Css 对于普通用户，如何仅从Screenreader页面隐藏任何元素，而不从页面隐藏任何元素？

对于普通用户，如何仅从Screenreader页面隐藏任何元素，而不从页面隐藏任何元素

我知道这些代码片段，但我想在屏幕上隐藏一些东西，而不是在页面上。Sscreen阅读器应跳过隐藏部分

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

---

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

---

我认为迈克尔在上面的回答在语义上是最合理的，也是实现你想要的最恰当的方式。他指出，唯一的问题是screenreader\browser支持

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

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

---

您想对screenreader用户隐藏哪些内容？也许有一种更合适的方式来处理这个问题。当将其显示为图像时，从可访问性的角度来看，可能会不赞成它，这取决于内容是什么。

在元素上使用此选项：

aria-hidden="true"

---

这对有视力的用户来说是正常的，但屏幕阅读器不会读出元素

我认为许多屏幕阅读器不支持

@media aural

或

@media speech

，尽管它们已经存在多年了，所以CSS3 speech似乎不太可能成功。我希望这些东西能得到支持。这将使我们的生活变得更加轻松。但对于JAWS 12.0来说，情况并非如此。虽然未来的辅助设备可能会支持这一功能，但该功能目前尚未普遍实现。