Question

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

以下内容：

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

和

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

因此屏幕阅读器实际上会读出“分号”。有没有办法阻止它这样做？我理解这个说法：没有CSS标签实际上不起作用！

Answer 1

屏幕阅读器已经调整了现在读取的CSS生成内容。对您的问题的评论提供了良好的反馈（即使是从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>

在链接文字前面使用的图标

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

CSS内容和屏幕阅读器（JAW）

1 个答案: