对屏幕阅读器隐藏图标的适当方法是什么

在我的网络应用程序中，我为自己制作了一种仅由图标组成的字体。我使用这些图标来补充应用程序中的标题和子标题，并使其在视觉上更具吸引力。

然而，像 JAWS 这样的屏幕阅读器会读出这些内容，这会给屏幕阅读器的用户带来不愉快的体验。

例如角色c显示云的图像。我以这种方式使用它来补充例如标题<h1>:

<span class="my-font">c</span>

现在我希望屏幕阅读器完全忽略这一点，因为这只是补充现有标题，而不是为页面上的内容添加任何新含义。通过我的研究，我发现了两种可能性：

aria-hidden="true" or role="presentation"

我只是不确定其中哪一个（或者可能两者）适合我想要实现的目标。

您应该使用aria-hidden="true" http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden属性，其中表示：

指示该元素及其所有后代对于作者实现的任何用户都是不可见或不可感知的。

这意味着该元素不应被任何用户感知。所以使用：

<span class="my-font" aria-hidden="true">c</span>

如果图标应该是一个链接或者不仅仅是为了装饰，我建议您在它们旁边添加一些文本，以便屏幕阅读器知道它是什么。您可以将文本移出屏幕，以便只有屏幕阅读器才能看到它。

HTML

<span>
    <span class="my-font" aria-hidden="true">c</span>
    <span class="screen-reader">About me</span>
</span>

CSS

.screen-reader {
    position:absolute;
    top:-9999px;
    left:-9999px;
}