508 -相同图标的alt文本

Question

我在一个508兼容的网站上工作，并有相同的图标多次使用。如果用户是经过认证的企业主，他们的姓名旁边会有此图标。目前，屏幕阅读器将其作为经过认证的企业主读取。但是，如果用户将他们的屏幕阅读器设置为只听图像，他们将一遍又一遍地听到经过认证的企业主。

有没有办法让他们听到认证的企业主-个人的名字？我知道通过阅读更多的链接，很容易隐藏你希望屏幕阅读器阅读的信息，但不会让有视力的人使用span标签和隐藏的CSS看到相同的文本，但我不能真正将这些代码用于图像。

这个是可能的吗？或者，有没有其他方法来实现这一点呢？提前感谢您的帮助！

Answer 1

一种方法是不对图标使用单独的元素，而是将它们创建为伪元素，并将任何元数据(标题、ARIA角色)设置为其中包含名称的元素。

在这种情况下，图标不是图像或其他内容，而只是现有元素的装饰。

简化示例：

<p title="Certified Business Owner" class="icon icon-certified-business-owner">Karl Koch</p>

。

icon:before {
    font-family: FontAwesome;
    content: '\e000';
    speak: none;
}