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

我正在使用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辅助功能页面中的这一部分代码可能对您有用：

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

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