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

Question

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

所以如下：

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

和：

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

所以屏幕 reader 实际上会读出 "semi-colon"。有没有办法阻止它这样做？我知道 speak:none CSS 标签实际上不起作用！

Answer 1

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

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

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

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

CSS content and screen readers (JAWs)

css

accessibility

wai-aria

screen-readers

jaws-screen-reader