CSS 内容和屏幕阅读器 (JAW)

Question

我正在使用 CSS 内容从字体集中生成图标。问题是屏幕阅读器，尤其是 JAW，也在阅读内容！

所以如下：

<span class="uxf-icon uxf-search"></span>

和：

.uxf-search::before {
    content: ";"
}

所以屏幕阅读器实际上会读出“分号”。有没有办法阻止它这样做？我了解 speak:none CSS 标签实际上不起作用！

Answer 1

屏幕阅读器已适应现在阅读的 CSS 生成内容。您问题上的 cmets 提供了很好的反馈（甚至是从 2013 年开始，并且从那时起对 JAWS 进行了一些更新）。请注意，如果您使用的是第三方图标字体，那么您无法控制这些图标是否位于 Unicode 的私人使用区域中。

Font Awesome 使用与您的示例相同的技术，并且仅针对您引用的问题引起了一些批评。因此，Font Awesome came up with an accessibility page 可能对您有用。

如果您的图标真正仅用于装饰，而不是传达信息，那么 FA 可访问性页面中的这段代码可能对您有用：

用于纯装饰或视觉造型的图标

如果您使用图标来添加一些额外的装饰或品牌，则无需向用户宣布它，因为他们正在通过听觉方式浏览您的网站或应用程序。此外，如果您使用图标在视觉上重新强调或为 HTML 中已经存在的内容添加样式，则无需向使用辅助技术的用户重复此操作。您可以通过将 aria-hidden="true" 添加到您的 Font Awesome 标记来确保不会读取此内容。

<i class="fa fa-fighter-jet" aria-hidden="true"></i>

一个图标被用作纯粹的装饰

<h1 class="logo">
  <i class="fa fa-pied-piper" aria-hidden="true"></i>
  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>

一个用作标志的图标

<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>

链接文本前面使用的图标

与往常一样，使用真实用户进行测试，并确保图标的缺失不会损害页面的含义（在测试中对有视力的用户隐藏它，看看它的缺失是否会让他们感到困惑）。