css - 508 - 同一图标的替代文本

Question

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

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

这可能吗？还是有另一种方法可以使这项工作？在此先感谢您的帮助!

Answer 1

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

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

简化示例:

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

.

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