我正在使用CSS内容从字体集生成图标 . 问题是屏幕阅读器，尤其是JAW，也在阅读内容！
所以以下内容：
<span class="uxf-icon uxf-search"></span>
和：
.uxf-search::before { content: ";" }
所以屏幕阅读器实际上会读出“分号” . 有没有办法阻止它这样做？我理解这个说法：没有CSS标签实际上不起作用！
屏幕阅读器已经调整了现在读取的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>
链接文本前面使用的图标
与往常一样，测试真实用户并确保图标的缺失不会损害页面的含义（在测试中将其隐藏于有视力的用户并查看其缺失是否令他们感到困惑） .
1 回答
屏幕阅读器已经调整了现在读取的CSS生成内容 . 对您的问题的评论提供了良好的反馈（即使是从2013年开始，并且从那时起对JAWS进行了一些更新） . 请注意，如果您使用的是第三方图标字体，则无法控制这些图标是否存在于Unicode的专用区域中 .
Font Awesome使用与您的示例相同的技术，并且仅针对您引用的问题引起了一些抨击 . 因此，Font Awesome came up with an accessibility page可能对您有用 .
如果您的图标仅用于装饰，而不是用于传达信息，那么FA辅助功能页面中的这一部分代码可能对您有用：
与往常一样，测试真实用户并确保图标的缺失不会损害页面的含义（在测试中将其隐藏于有视力的用户并查看其缺失是否令他们感到困惑） .