仅为屏幕阅读器隐藏文本

Hide text ONLY for screen readers

我根本无法得到这个问题的答案。 WCAG 说它可以通过 aria-hidden 标签来完成,但我读到它在许多 reader 屏幕上不起作用。

无法理解 display:none 如何帮助隐藏某些文本 屏幕 readers(=除 SR 之外的其他设备可见)。这也不清楚屏幕 reader 如果不支持 css.

将如何作用于 display:none

是否有任何技术或最佳实践或任何我可以用来为屏幕 reader 隐藏一些文本

抱歉,最佳做法是使用 aria-hidden 属性。屏幕阅读器忽略 ARIA 属性的用户应该更改他们的软件。

aria-hidden 应用于对屏幕阅读器隐藏页面上的任何 non-focusable 内容。所有主要屏幕阅读器的当前版本都支持这一点。

为了satisfy WCAG 2 AA,一项功能只需要在常见的或至少一种广泛分布的免费辅助技术上得到支持。 Windows 上的 NVDA 和 Firefox、OS X 和 iOS 上的 VoiceOver 以及 Android 上的 Firefox Talkback 都支持此功能。

您也可以使用 role="presentation",这取决于标签、浏览器和屏幕 reader 它可能是更好的选择(或更差)。看看这个好教程,

HTML5 Accessibility: aria-hidden and role=”presentation”