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

在我的Web应用程序中，我为自己设置了一个完全由图标组成的字体。我使用这些图标来补充应用程序中的标题和副标题，使其在视觉上更具吸引力。

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

例如，字符c显示云的图像。我以这种方式使用它来补充标题，例如<h1>：

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

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

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

我只是不确定这两个中的哪一个(或者两个)适合我正在努力实现的目标。

---

解决方案

您应该使用aria-hidden="true"属性，该属性表示：

表示该元素及其所有子元素对于作者实现的任何用户都不可见或不可见。

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

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