Question

我正在开发符合508标准的网站，并且多次使用相同的图标。如果用户是经过认证的业务所有者，则他们的名称旁边会显示此图标。目前，屏幕阅读器将其读作认证企业所有者。但是，如果用户将其屏幕阅读器设置为仅收听图像，他们就会一遍又一遍地听到经过认证的业务所有者。

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

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

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;
}