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

Question

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

因此，以下内容会被朗读出来：

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

并且：

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

屏幕阅读器会实际朗读出“分号”。有没有办法防止这样做？我知道speak:none CSS标签实际上不起作用！

- j00m

---

相关 - https://dev59.com/o3DXa4cB1Zd3GeqP_2Qi - Paulie_D

确实，特别是在https://dev59.com/o3DXa4cB1Zd3GeqP_2Qi#15795793中，unor建议使用UTF-8的PUA（专用区域）而不是“常规字符”。 - flowtron

Answer 1

屏幕阅读器已经适应并读取CSS生成的内容。您提出的问题的评论提供了良好的反馈（即使是从2013年起，由于JAWS进行了一些更新）。请注意，如果您使用第三方图标字体，则无法控制这些图标是否位于Unicode的私人使用区域。

Font Awesome使用与您示例中相同的技术，并因为正如您所指出的问题而受到了一些批评。因此，Font Awesome推出了一个可为您提供帮助的辅助功能页面。

如果您的图标仅用于装饰而不是传达信息，则来自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>

一个图标被用作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>

在链接文本前使用图标

一如既往，应该与真实用户进行测试，并确保图标的缺失不会影响页面的意义（在测试中隐藏它，看看是否会令视力正常的用户感到困惑）。

- aardrian

---

谢谢@aardrian，我发现使用aria-hidden的问题是JAWs会忽略它并仍然读出CSS内容。 - j00m

你有一个测试页面的URL可以分享吗？ - aardrian

请查看此链接：https://alastairc.ac/testing/icon-font-link.html如果您在JAWs中测试该页面，甚至aria-hidden的图标也会被读出来。 - j00m

很奇怪，当你切换到它时，它仍然会读出aria隐藏的内容？！？ - j00m

同意。确实很奇怪。也很烦人。 - aardrian