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

Question

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

所以如下:

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

和:

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

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

Answer 1

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

Font Awesome 使用与您的示例中相同的技术，并且仅针对您引用的问题引起了一些不满。结果，Font Awesome came up with an accessibility page可能对你有用。

如果您的图标真正仅用于装饰，而不是传达信息，那么来自 FA 辅助功能页面的这段代码可能适合您:

Icons used for pure decoration or visual styling

If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.

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

an icon being used as pure decoration

<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>

an icon being used as a logo

<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>

an icon being used in front of link text

一如既往，对真实用户进行测试，确保缺少图标不会损害页面的含义(在测试中对有视力的用户隐藏图标，看看缺少图标是否会让他们感到困惑)。